Disabling warnings about inline value attributes for v-model

[nfplee]

Version

3.0.11

Steps to reproduce

Open the following:

https://jsfiddle.net/zqystjur/

The following warning will be thrown:

[Vue warn]: Template compilation error: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.

---

This seems to relate to the following Vue 2 issue:

vuejs/vue#4733

[nfplee]

What about when using :value alongside the value attribute? From my understanding v-model is shorthand for :value="foo" @input="foo = $event.target.value". However when using :value it doesn't seem to override the value attribute unlike v-model. See the following for an example:

https://jsfiddle.net/s2orke8c/

No warning is thrown but maybe one should be thrown in this case, unless this is a bug.

[posva]

@phanan I think your input would be valuable here

[phanan]

Hmm, TBH I'm not sure why this 1.x behavior was revived in v3, but I still tend to agree with 4-year-ago me 😄 that this warning isn't extremely helpful. Again, as the original v2 issue author said, there are frameworks/libraries/CMSes that generate inline value attributes, which would cause this warning to be thrown all over the place. I'd vote for removal.

[posva]

what about :value and this proposal

[phanan]

AFAIU there's no warning for :value, which is expected right? But I'd tend to agree that :value not overriding value sounds weird. Maybe @yyx990803 can shed a light on both topics here?

[posva]

Now that I read the comment again, I was more thinking of a :value with a v-model throwing a warning instead of any value attribute with a v-model

[phanan]

That makes perfect sense @posva. The two bindings with conflicting effects should have a warning. Binding vs static shouldn't.

[nfplee]

I personally feel that :value should override the value attribute (to be consistent with v-model). But I agree it makes sense to throw a warning if :value is used with v-model.

[nfplee]

It seems the order of the attributes is important. See the following:

https://jsfiddle.net/xm270v6y/

Therefore my new conclusion is that it should throw a warning if :value is used with v-model or :value is used after a value attribute (but not before).

There is a similar issue when using v-text and v-html attribute's on elements which contains server-side rendered content. See the following example:

https://jsfiddle.net/jbfqsgd1/

Once again I feel these warnings are counter intuitive and actually discourage one of the great features of Vue in that you can render an initial value (which matches the data-bound value) and have Vue later override it. One use case for this is for multi-page applications where I have replaced some of the jQuery plugins with Vue components. If the server-side rendered code doesn't match the output after the Vue instance is mounted then there will be a flicker as the content changes.

[nfplee]

I've been looking at petite-vue this weekend and that's exactly how I've been using Vue. This is why I believe these warnings should be removed since they interfere with SSR and Vue should ideally be a superset of Petite-Vue.

[nfplee]

Any update on this? Another idea would be to add a config option to ignore particular warnings.

[u01jmg3]

Any update on this for 2023? It would be great to be able to control this warning.