Vue3 v-model绑定带括号访问的嵌套数据属性失败

Question

我正在使用Vue3，并面临无法将嵌套属性正确绑定到v-model的问题。

这是源代码：

模板：

<div id="app">
<span>{{level1.level2.level3}}</span> <br/>
<span>{{level1['level2']['level3']}}</span> <br/>
<input v-model="level1.level2.level3" /> <br/>
<input v-model="level1.level2['level3']" /> <br/>
<input v-model="level1['level2']['level3']" />
</div>

JS-

Vue.createApp({
data() {
return {
level1: {
level2: {
level3: "val"
}
}
}
},
methods: {}
}).mount("#app")

<input v-model="level1.level2.level3" />绑定工作

<input v-model="level1.level2['level3']" />绑定工作

但是<input v-model="level1['level2']['level3']" />绑定失败

控制台警告说

"[Vue warn]: Template compilation error: v-model value must be a valid JavaScript member expression.

level1['level2']['level3']没有正确绑定到v-model的原因是什么？我认为这是一个有效的js表达式。

这是在线小提琴

Answer 1

这似乎是Vue本身的问题，而不是代码的问题。这个问题似乎也在一周多前的一次提交中得到了解决。

所以如果你在Vue<3.1.1(也就是说，除了当前的GitHub主分支之外的任何版本(，你在这里唯一真正的解决方案是修改你访问属性的方式，等待Vue更新，或者直接依赖GitHub存储库的主分支(一般来说，这不是一个好主意，所以只有当你需要这个符号，并且你现在需要时才这样做(。