calling methods is not allowed in v-model

[jacekkarczmarczyk]

Version

3.1.2

Reproduction link

Vue 3 - not working:

sfc.vuejs.org

Vue 2 - working:

https://codepen.io/jkarczm/pen/ZEeNNPW?editors=1010

Steps to reproduce

<input v-model="whatever().something">

What is expected?

No compilation error

What is actually happening?

v-model value must be a valid JavaScript member expression.

[lidlanca]

some improvements were made in (bc100c5 )
to cover more valid expressions, but it does not cover all valid member expressions.
like the one you encountered.

<input v-model="what().ever">

if your function does not have dynamic arguments, you can wrap the function in a computed

what = computed( ()=> whatever())

<input v-model="what.ever">

---

if you do have dynamic arguments, it will complicate things to work around that limitation.

[jacekkarczmarczyk]

if you function does not have dynamic arguments, you can wrap the function in a computed

Yeah, but if it has and they come from v-for (like in the example in my comment in the mentioned commit) i can't use computed.
I wonder why do we even need this check, vue doesn't check if you have proper expression in v-bind:foo or in mustaches, you're just getting a syntax or runtime error, why it's not enough in v-model?

[lidlanca]

and here is a possible workaround if you really need dynamic arguments

https://sfc-vue3.netlify.app/#/gist/c1242a00f99d8a3ed26cb002303dfcca

I originally recommended reducing that to a development warning and not an error.
due to incomplete validation.

[shadoWalker89]

Using the return value of a function in v-model used to work in vue 2.
I encountered this problem after upgrading my app to vue 3

[vricosti]

Same problem here:

    <input
      type="text"
      v-model="getValuesMarginMin()[0]"
      :class="'entry '+getUserInputStatusClass(getValuesMarginMin()[3])"
      disabled
    />
</td>

`export default {
store: store,
name: "ValuesConstraintsMarginUnit",
mixins: [HtmlAdapter],

props: {
labels: {
type: Array,
default: function() {
return [];
}
},
values: {
type: Array,
default: function() {
return [];
}
},
},
methods: {
getValuesMarginMin() {
return this.values[0];
},
...`