在VueJS 2中使用v-for value + string的动态v模型

时间:2018-04-18 14:32:10

标签: javascript vue.js vuejs2

在我的JavaScript中我有:

Current - 1

在HTML中我有:

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

问题在于我找不到以这种方式访问​​我的模型的方法,而我现在看到的唯一方法是销毁<li v-for="(room, index) in rooms"> <input type="number" v-model="'selected' + capitalize(room.type)"> </li> 并手动制作,但它是&#39;这不是最好的解决方案,因为我有很多房间&#34;。欢迎任何想法。

2 个答案:

答案 0 :(得分:3)

您正在尝试通过字符串访问data属性。为此,您可以使用obj['propname']作为对象使用对象访问属性表示法($data):

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

另外,你的计算机应该是一种方法:

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

演示:

&#13;
&#13;
new Vue({
  el: '#app',
  data: {
    rooms: [
      {type: 'single'},
      {type: 'double'}
    ],
    selectedSingle: 111,
    selectedDouble: 222,
  },
  methods: {                                // changed from computed to method
    capitalize: function(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
  }
})
&#13;
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul>
    <li v-for="(room, index) in rooms">
      <input type="number" v-model="$data['selected' + capitalize(room.type)]">
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

对于使用Vue 3的用户,请使用this而不是$data

例如:

import { reactive, createApp } from 'vue';

createApp({
  setup() {
    const state = reactive({
      propertyA: 'valueA',
      propertyB: 'valueB',
    });
    return state;
  };
});
<input v-for="p in ['propertyA', 'propertyB']" v-model="this[p]">