使用v-model绑定修改数组内容，视图层没有更新的解决办法

问题案例

我们先来看一个问题案例（VUE2,VUE3都存在这个问题）：

<div v-for="(item, index) in arr" :key="index">
         <input type="text" v-model="item">
         <p>{{ item }}</p>
</div>

const app = Vue.createApp({
        data() {
            return {
                arr: [
                    'a',
                    'b',
                    'c'
                ]
            };
        }
});
app.mount('#app');

问题案例访问地址：v-model不支持直接绑定数组

可以看到无论我在输入框中怎么输入，arr中的值是无法响应的。

但是当更改下数组结构：

 arr2: [ {name: 'd'}, {name: 'e'}, {name: 'f'} ]

<div v-for="(item2, index2) in arr2" :key="index2">
         <input type="text" v-model="item2.name">
         <p>{{ item2.name }}</p>
</div>

发现就可以正常绑定，然后数组中对象的值也能正常更新了。

问题案例访问地址：v-model不支持直接绑定数组 （横线下方的例子）

原因分析以及解决办法

原因分析

因为数组中的内容没有像对象一样有特定的名字进行响应式，所以很多时候，v-model 对数组来说是没有效果的。

解决办法

使用@input绑定input然后输入时候使用this.$forceUpdate() 手动更新数据。

注意：你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，那么你可以通过$forceUpdate来做这件事。

<div v-for="(item, index) in arr" :key="index">
       <input type="text" 
                   @input="inputText($event, index)"
                   :value="item"
        >
        <p>{{ item }}</p>
</div>

const app = Vue.createApp({
        data() {
            return {
                arr: [
                    'a',
                    'b',
                    'c'
                ]
            };
        },
        methods: {
            inputText($e, index) {
                this.arr[index] = $e.target.value;
                 // 数组视图不更新 需要手动更新 vue2.x需要执行下面的手动更新，vue3.0以上则不需要
                this.$forceUpdate();
            }
        }
});
app.mount('#app');

点击查看在线解决案例：使用input事件替代

相关资料