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

风居住的街道
  • 210

clipboard.png

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

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

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

回复
阅读 5.6k
5 个回答
✓ 已被采纳

首先要搞清楚的有两点:

  • 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)
  }
}

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

v-model='result[ item ]'

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

v-model="result[item]"

v-model='result[ item ]'

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

你知道吗?

宣传栏