在VueJS 2中使用v-for值+字符串的动态v-model

Question

在我的JavaScript中，我有：

data: {
    rooms: [
         {type: 'single'},
         {type: 'double'}
         ...
    ],
    selectedSingle: 0,
    selectedDouble: 0,
    ...
},
computed: {
    capitalize: function(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
}

在HTML中，我有：

<li v-for="(room, index) in rooms">
    <input type="number" v-model="'selected' + capitalize(room.type)">
</li>

问题是我找不到以这种方式访问​​模型的方法，而我现在看到的唯一方法是销毁v-for并手动进行创建，但这不是最佳的解决方案，因为我有很多“房间”。任何想法都欢迎。

Answer 1

您正在尝试data通过字符串访问属性。为此，您可以使用对象访问属性符号（obj['propname']）$data作为对象：

<input type="number" v-model="$data['selected' + capitalize(room.type)]">

另外，您的计算出的应该确实是一种方法：

  methods: {                                // changed from computed to method
    capitalize: function(string) {

演示：

<input type="number" v-model="$data['selected' + capitalize(room.type)]">

  methods: {                                // changed from computed to method
    capitalize: function(string) {