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

clipboard.png

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

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

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

阅读 4.2k
评论
    5 个回答
    • 1.3k

    首先要搞清楚的有两点:

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

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

      相似问题
      推荐文章