Vue中v-model绑定使用function作为属性名是否存在限制？

v-model相关限制说明 #

v-model本身支持绑定嵌套层级的对象属性，你遇到的报错并非v-model的功能限制，本质是JavaScript保留字触发的模板编译错误：

• function是JavaScript的核心保留关键字，Vue模板解析指令、插值内的JS表达式时，会严格遵循JS语法规则：点语法访问属性时，.前的标识符不允许使用保留字
• 该问题并非v-model独有，直接写:value="function.moduleId"、{{ function.moduleId }}这类非v-model绑定，同样会抛出语法错误
• 报错和你使用的Dropdown第三方组件无关，属于Vue模板编译阶段的语法校验问题

不修改function字段名的解决方案 #

无需调整项目既定的命名规范，以下两种方案都可以解决问题：

方案1：通过$data下标访问绕开校验（改动成本最低） #

将v-model的绑定值改为通过$data以字符串下标形式读取对应字段，完全保留原有数据结构，不会触发保留字语法校验：

<Dropdown 
  v-model="$data['function'].moduleId" 
  :options="modules" 
  optionValue="moduleId" 
  :filter="true" 
  optionLabel="moduleName" 
  required="true"
>
</Dropdown>

该方案仅需修改模板绑定值，不需要调整任何脚本逻辑，是最便捷的解决方式。

方案2：计算属性做双向中转（模板可读性更高） #

如果觉得模板内下标访问写法不够整洁，可以在脚本层定义支持双向读写的计算属性作为绑定中转，原有function字段命名完全不需要改动：
Vue2选项式API示例：

export default {
  data() {
    return {
      // 原有字段保留，无需重命名
      function: {
        moduleId: ''
      },
      modules: []
    }
  },
  computed: {
    bindModuleId: {
      get() {
        return this.function.moduleId
      },
      set(val) {
        this.function.moduleId = val
      }
    }
  }
}

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

<Dropdown 
  v-model="bindModuleId" 
  :options="modules" 
  optionValue="moduleId" 
  :filter="true" 
  optionLabel="moduleName" 
  required="true"
>
</Dropdown>

Vue3组合式API逻辑完全一致，给computed传入带get、set配置的对象即可实现相同效果。

避坑提示：不要直接在模板内写this['function'].moduleId，Vue模板表达式中this默认指向组件实例可省略，但直接写this取属性在部分编译版本下可能存在上下文指向异常，使用$data访问是兼容性最稳定的写法。

内容的提问来源于stack exchange，提问作者Abdus Sattar Bhuiyan