【Vue】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的话，数组也是没问题的！

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

使用对象作为数据源

https://jsfiddle.net/Vincent_...

使用数组作为数据源

https://jsfiddle.net/Vincent_...

可以

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

以上是 【Vue】vue中v-for出来的input如何实现双向绑定 的全部内容， 来源链接： utcz.com/a/73132.html

回到顶部