以下是一个简单的示例,演示了如何在 v-for 中使用 ref 数组:
<template>
<div>
<div v-for="(item, index) in refArray" :key="index">
{{ item.value }}
</div>
<button @click="updateArray">Update Array</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建一个响应式数组
const refArray = ref([]);
// 更新数组的方法
const updateArray = () => {
// 在数组中添加新的 ref 对象
refArray.value.push(ref(`Item ${refArray.value.length + 1}`));
};
// 初始化数组
updateArray();
return {
refArray,
updateArray
};
}
};
</script>
在上述例子中,refArray 是一个由 ref 创建的响应式数组。在 updateArray 方法中,我们通过调用 ref 创建一个新的 ref 对象,并将其添加到 refArray 数组中。
注意,直接对 refArray 数组调用 push 是不会触发视图更新的。我们需要使用 refArray.value.push,因为 ref 对象实际上是包装在 value 属性中的。
这种方法确保在 v-for 中使用的数组元素都是 ref 对象,从而保证在更新数组时视图能够正确地响应。
转载请注明出处:http://www.zyzy.cn/article/detail/539/Vue 3.0