v-model value must be a valid JavaScript member expression

[FabianSchwartau]

Version

3.1.0-beta.6

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8cD57e3Rlc3REYXRhWzBdWzBdfX08L3A+XG4gIDxpbnB1dCB2LW1vZGVsPVwidGVzdERhdGFbMF1bMF1cIj5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG4gIGV4cG9ydCBkZWZhdWx0IHtcbiAgICBuYW1lOiAnYXBwJyxcbiAgICBkYXRhKCkge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgdGVzdERhdGE6IFtbXCIxXCIsIFwiMlwiXSwgW1wiM1wiLCBcIjRcIl1dXG4gICAgICB9XG4gICAgfVxuICB9XG48L3NjcmlwdD5cbiJ9

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 #3891, but was closed due to missing example.

[lidlanca]

The fix #3675 for #3673 for the case of obj[x[0]]
regressed the case of obj[0][0]

[LinusBorg]

/cc @HcySunYang

[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.

[HcySunYang]

Made a PR

[lidlanca]

@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.

[whitespacecode]

@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"

[posva]

@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