获取要在Vue3模板中更新的更新数组

Question

虽然这不是确切的代码，但它代表了问题。我有一个对象，它有一个返回数组的方法。然后异步更新此数组。在演示中，它是一个超时，但实际上它将是一个HTTP调用：

function () {
let a = ['apple'];
setTimeout(() => {
a.push['banana'];
}, 3000);
return a;
}

然后通过计算的属性将其包括在Vue组件中并显示，例如

<ul>
<li v-for="(row, index) in testObjectArr" v-bind:key="index">
{{row}}
</li>
</ul>

但是，这只显示第一个条目(苹果(，而不显示第二个条目(香蕉(。如果某个事件确实导致模板刷新，则它确实会出现。使用像watch这样的东西也不起作用。让它工作的唯一方法是向对象传递一个处理程序，该处理程序手动触发重绘，这可能不太理想。有没有什么方法可以让你对上述情况做出回应？

Answer 1

为了使变量成为被动变量，您应该使用ref或reactive将它们声明为被动变量。所以你的代码应该是：

<script setup>
import { ref } from 'vue';
const items = ref(['apple']);
setTimeout(() => {
items.value.push('banana');
}, 1000);
</script>
<template>
<ul>
<li v-for="(item, index) of items" :key="index">
{{ item }}
</li>
</ul>
</template>

实时查看