vue中v-for出来的input如何实现双向绑定

比如我有一个数组

var array = [1,2,3,4,5,6,7,8];

循环

<input v-for="item in array" v-model="item"></input>

这么写array是不会被同步的,我想问下,在不使用子组件的情况下,有方法实现同步吗

回答:

示例代码

<div id="app">
    <input v-for="(item, index) in list" :key="index" v-model="list[index]" @change="print" />
</div>
new Vue({
    el: '#app',
    data: {
        list: ['a', 'b', 'c']
    },
    methods: {
        print() {
            console.log(this.list);
        }
    }
})

题外话

使用对象作为数据源可以参考以下例子,我认为会是更友好的解决方案(针对双向绑定),差异可以参考一下最下面的两个示例

示例代码

<div id="app">
    <input v-for="(item, index) in list" :key="index" v-model="list[index]" @change="print" />
</div>
new Vue({
    el: '#app',
    data: {
        list: {
            0: 'a',
            1: 'b',
            2: 'c'
        }
    },
    methods: {
        print() {
            console.log(this.list);
        }
    },
    mounted() {
        setTimeout(() => {
            this.list[0] = 'd';
            console.log(this.list);
        }, 1000);
    }
})

为什么用对象

主要是因为如果数据源是数组的话,list[x] = ‘xxx’这种方法修改数组的元素的值,是不能被监听到的,Vue的文档里面有提到,因此我会说使用对象作为数据源会是更友好的解决方案,当然了,如果你都记得使用Vue.set 或者 splice的话,数组也是没问题的!

clipboard.png

使用对象作为数据源

https://jsfiddle.net/Vincent_…

使用数组作为数据源

https://jsfiddle.net/Vincent_…

回答:

可以

<input v-for="(item,i) in array" v-model="array[i]"></input>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注