Vue3中v-model用方括号访问嵌套属性绑定失败是什么原因？

问题原因 #

你写的level1['level2']['level3']确实是合法的JS表达式，报错是Vue3模板编译器对v-model的表达式有专属的解析规则限制：
v-model是双向绑定语法糖，编译阶段需要将表达式解析为可赋值的成员引用，才能正确拆分为:modelValue绑定和@update:modelValue赋值逻辑。目前Vue3的编译器只支持「点号链式访问 + 末尾段方括号访问」的成员表达式解析，不支持多级连续方括号开头的链式访问，所以level1['level2']['level3']会被判定为无效的v-model表达式。
这属于Vue模板编译器的已知实现限制，和JS本身的语法合法性无关。

解决方案 #

你可以根据使用场景选以下任意一种方案解决：

• 如果属性名是固定值，优先改为点号访问的写法，完全兼容v-model：

<input v-model="level1.level2.level3" />

• 如果最后一级属性名是动态值，可保留最后一层方括号，前面层级用点号访问：

<input v-model="level1.level2[dynamicKey]" />

• 如果多层级都是动态属性名无法用点号访问，可封装带get/set的计算属性来绑定：

// 选项式API写法
computed: {
  nestedVal: {
    get() {
      return this.level1['level2']['level3']
    },
    set(newVal) {
      this.level1['level2']['level3'] = newVal
    }
  }
}

模板直接绑定计算属性即可：

<input v-model="nestedVal" />

内容的提问来源于stack exchange，提问作者Opass