关于Vue动态绑定v-model的问题

Question

问题: 这里有一个循环，其中deeplearning是一个列表内容类似于['lstm0','lstm1','gru0']这样的列表，但是列表的内容是随着用户添加而变动的，因此不是固定的。其中标注红线部分v-model我想动态绑定到列表的元素
1.由于列表内容不固定，我无法在data中定义一个变量提前声明
2.我在data写了一个字典例如

result: {
    'lstm0':'',
    'lstm1':''
}

我想让其绑定到lstm.item上但是这样的写法会导致直接是result.item，而不是result.lstm0，有什么办法让v-model的item是变量吗？或者提供其他的方法实现动态绑定

Answer 1

首先要搞清楚的有两点：

• v-model前面是不需要加“:”字符的，看看是不是加了冒号影响了双向绑定，因为这个没有报错。
• result.item代表了result['item']这样的用法，如果要让item表示变量，就必须用result[item]来获取。

基于题主的要求我也写了一个小栗子亲测是ok的, 可以试试。

<div id="component2">
    <div v-for="(item, index) in list" :key="index">
      <label>{{ item }}</label>
      <input :v-model="result[item]" />
    </div>
    <button @click="changeList">变更list</button>
</div>


data () {
  return {
  list: ['s1', 's2', 's3'],
    result: {}
  }
},
created() {
  this.list.forEach(item => {
    this.result[item] = ''
  })
  console.log(this.list, this.result)
},
methods: {
  changeList () {
    this.result = {}
    this.list = ['d1', 'd2', 'd3']
    this.list.forEach(item => {
      this.result[item] = ''
    })
    console.log(this.list, this.result)
  }
}

另外其他回答者的答案也都是对的，如果上述两点问题都解决了，应该是可以达到目的的。

Answer 2

v-model='result[ item ]'

测试了下，这样是可以实现双向绑定的，我看上面还调用函数什么的，所以你的item是字符串吗

Answer 3

v-model="result[item]"

Answer 4

v-model='result[ item ]'

Answer 5

v-model="reports.btnsindex" v-for的时候 用index 绑定。