嘿，我完全懂你现在卡在哪了——直接用字符串拼接'selected' + capitalize(room.type)给v-model绑定属性根本行不通，因为Vue的v-model需要的是对data里响应式变量的直接引用，而不是一个字符串字面量，它没法自动把字符串转换成对应的变量名来建立绑定。

咱们换个更优雅且易维护的思路，重构你的data结构就搞定了：

步骤1：把分散的selected变量改成对象 #

原来你把selectedSingle、selectedDouble这些单独放在data里，现在把它们整合到一个对象里，比如叫selectedRooms，key对应房间类型的小写值：

data: {
  rooms: [{type: "single"}, {type: "double"}],
  selectedRooms: {
    single: 0,
    double: 0
  }
}

如果你的rooms列表是动态获取的（比如从后端接口拉取），还可以在组件初始化时自动生成对应的key，避免手动维护：

created() {
  this.rooms.forEach(room => {
    // 用$set确保新增的属性是响应式的（Vue2的特性）
    if (!this.selectedRooms.hasOwnProperty(room.type)) {
      this.$set(this.selectedRooms, room.type, 0);
    }
  });
}

步骤2：修改模板的v-model绑定 #

现在模板里直接通过对象的key来动态绑定，不用再拼接字符串了，简洁又靠谱：

<li v-for="(room, index) in rooms" :key="index">
  <input type="number" v-model="selectedRooms[room.type]">
</li>

这里别忘了给v-for加上:key，Vue2要求必须有这个属性来保证列表渲染的性能和正确性。

为什么原来的方式不行？ #

你之前写的v-model="'selected' + capitalize(room.type)"，本质上是把一个字符串（比如"selectedSingle"）传给了v-model，但Vue没法把这个字符串解析成data里的selectedSingle变量，自然没法建立响应式绑定，所以输入框根本没法和数据联动。

（可选）如果一定要保留原变量名？ #

要是你因为某些原因必须用selectedSingle、selectedDouble这种单独变量，那可以通过this['selected' + capitalize(room.type)]在methods里访问，但模板里不能直接这么写——不过这种方式非常不推荐，因为每次新增房间类型都要手动加新的变量，维护成本太高，远不如用对象灵活。

这样改完之后，你的动态v-model绑定就能正常工作啦，而且代码也更整洁易维护~

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