v-model value must be a valid JavaScript member expression
Version
3.1.0-beta.6
Reproduction link
Steps to reproduce
Access a 2D array with a v-model command in vue 3.1.0-beta6 and newer.
What is expected?
Access/model the element of the array without an error message.
What is actually happening?
It will throw an error telling you "v-model value must be a valid JavaScript member expression".
Interestingly this does not seem to be a problem with v-bind. Earlier versions, including 3.0.11, are working just fine. Has already been reported in https://github.com/vuejs/vue-next/issues/3891, but was closed due to missing example.
1
The fix #3675 for #3673 for the case of obj[x[0]]
regressed the case of obj[0][0]
/cc @HcySunYang
RegExp cannot cover all use cases, maybe it is more reasonable to use babel to check the validity of expressions, but considering the compiler in the browser environment, including babel is not a good solution.
Made a PR
@HcySunYang You are right the regexp approach is flawed
with the new pr this will fail.
isMemberExpression("a[b[c.d]][0]") => false
if you can't use a parser to validate the expression,due to the concern of bundling babel in browser build perhaps change it from an error to a development warning, so this will not be a blocker. for cases the regexp can't cover.
@yyx990803 I updated to vue 3.1.2 and still get the error
[plugin:vite:vue] v-model value must be a valid JavaScript member expression.
My code:
<child-component v-model="form.options[lang][index]"></child-component >
I'm using compat build.
temporary work around i use
:value="form.options[lang][index]"
@change="(e) => form.options[lang][index] = e.target.value"
@JoeriTheGreat It seems to be working with the given example on this issue. Maybe it's a compat bug but I'm unsure if the compiler does a different work on compat mode