Vue中如何在v-model或:value中使用变量动态绑定对象

嘿，这个需求其实Vue原生就支持，核心就是用动态属性访问语法（方括号[]）来替代点语法里的固定属性名。

具体怎么做 #

你已经有了childId变量（比如值是'child_1'或'child_2'），只需要把原来的固定属性名替换成方括号包裹的变量即可：

<input 
  type="text" 
  class="form-control" 
  id="child_name" 
  v-model="children[childId].name"
/>

当你通过点击事件更新childId的值时，v-model会自动切换绑定的数据源——输入框会自动显示对应孩子的名字，同时修改输入内容也会同步更新到children对象里对应的属性中。

完整示例代码 #

给你一个更完整的组件示例，包含切换孩子的逻辑：

<template>
  <div class="child-form">
    <!-- 切换按钮 -->
    <button 
      v-for="(child, id) in children" 
      :key="id"
      @click="childId = id"
      :class="{ active: childId === id }"
    >
      切换到 {{ child.name }}
    </button>

    <!-- 动态绑定的输入框 -->
    <div class="form-group">
      <label for="child_name">姓名</label>
      <input 
        type="text" 
        class="form-control" 
        id="child_name" 
        v-model="children[childId].name"
      />
    </div>
    <div class="form-group">
      <label for="child_gender">性别</label>
      <input 
        type="text" 
        class="form-control" 
        id="child_gender" 
        v-model="children[childId].gender"
      />
    </div>
    <!-- 其他属性同理 -->
  </div>
</template>

<script>
export default {
  props: {
    children: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 默认选中第一个孩子（这里取对象的第一个key）
      childId: Object.keys(this.children)[0]
    };
  }
};
</script>

<style scoped>
.active {
  background-color: #42b983;
  color: white;
}
</style>

为什么之前的写法失效？ #

之前你尝试用字符串变量直接替换child_1时，如果写成children.childId.name，Vue会把childId当成一个字面量属性名，而不是变量——它会去children对象里找名为childId的属性，而不是用childId变量的值作为属性名。方括号语法才会把里面的内容当作变量解析，这是JavaScript对象的基础语法哦。

补充：如果用:value的情况 #

如果你因为某些原因需要用:value而不是v-model，写法是一样的，然后需要手动处理input事件来更新数据：

<input 
  type="text" 
  class="form-control" 
  id="child_name" 
  :value="children[childId].name"
  @input="children[childId].name = $event.target.value"
/>

不过v-model已经帮你封装了双向绑定的逻辑，所以优先用v-model更省心。

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