vue实现数组双向绑定
Vue 实现数组双向绑定
Vue 中实现数组的双向绑定通常使用 v-model 指令，但需要注意 Vue 对数组的响应式处理机制。以下是几种常见方法：
使用 v-model 绑定数组
在表单元素（如复选框组）中，v-model 可以直接绑定到数组，当用户操作时，数组会自动更新。
<template>
<div>
<input type="checkbox" id="item1" value="item1" v-model="checkedItems">
<label for="item1">Item 1</label>
<input type="checkbox" id="item2" value="item2" v-model="checkedItems">
<label for="item2">Item 2</label>
<input type="checkbox" id="item3" value="item3" v-model="checkedItems">
<label for="item3">Item 3</label>
<p>Checked items: {{ checkedItems }}</p>
</div>
</template>
<script>
export default {
data() {
return {
checkedItems: []
};
}
};
</script>使用 Vue.set 或 this.$set 触发响应式更新
Vue 无法检测到直接通过索引修改数组或修改数组长度的情况。需要使用 Vue.set 或 this.$set 确保响应式更新。
methods: {
updateArray(index, newValue) {
this.$set(this.items, index, newValue);
}
}使用数组变异方法
Vue 对以下数组方法进行了封装，调用这些方法可以触发视图更新：
push()pop()shift()unshift()splice()sort()reverse()
methods: {
addItem(newItem) {
this.items.push(newItem);
},
removeItem(index) {
this.items.splice(index, 1);
}
}使用计算属性实现复杂逻辑
如果需要基于数组生成派生数据，可以使用计算属性。
computed: {
filteredItems() {
return this.items.filter(item => item.active);
}
}使用 watch 监听数组变化
如果需要监听数组变化并执行特定逻辑，可以使用 watch。
watch: {
items: {
handler(newVal, oldVal) {
console.log('Array changed:', newVal);
},
deep: true
}
}注意事项
- 直接通过索引修改数组（如
this.items[0] = newValue）不会触发视图更新。 - 使用
splice或$set修改数组时，可以确保响应式更新。 - 对于嵌套数组或对象，需设置
deep: true进行深度监听。
