vue.js - 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的话，数组也是没问题的！

使用对象作为数据源

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

使用数组作为数据源

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

这篇关于vue.js - vue中v-for出来的input如何实现双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！