Unable to unset a 'form' prop on a button with null value.

[LinusBorg]

Version

3.0.4

Reproduction link

https://jsfiddle.net/Linusborg/2fwLmu5b/

Steps to reproduce

• Run the fiddle above.
• check the console
• See an error:

What is expected?

'form' attribute is being unset successfully.

What is actually happening?

Console Warning:

Failed setting prop "form" on : value null is invalid. TypeError: Cannot set property form of # which has only a getter

---

#1788 attempted to solve a similar problem, making Vue patch this with setAttribute instead of setting it as a DOMprop - but the added value check makes Vue fall back to a DOMprop assignment for non-string values.

Note also that setting it as an empty string is not a proper solution as this breaks the button's form property's inheritance of the form's ID it might be nested within.

So we need to use setAttribute() regardless of the type of value.

[posva]

Do you mean we should remove the check of typeof of string? https://github.com/vuejs/vue-next/pull/1788/files#r465890830

[LinusBorg]

Yep. That would mean Vue will always set it as an attribute, and setting the attribute value as null or undefined will successfully remove it, judging from my (preliminary) tests in the browser console.

We could in turn add a check for the element's type, as that attribute only exists on form elements.

[luwuer]

The warning is because the form attr is readonly in button https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element , i think this warning message should show to users .

Same as #2766 .

[LinusBorg]

The warning should not show, it should not happen in the first place as we should set the value via setAttribute('form', ...) (which is not readonly*)

[luwuer]

I see your point, can use setAttribute('form', ...) set attributes and attributes.form can control form attribute, sorry for it.