反应性内部的Vue -组合API数组没有在DOM中更新。
反应性内部的Vue -组合API数组没有在DOM中更新。
提问于 2021-09-08 12:57:58
我在反应性()内部有一个帖子数组，我希望它被更新为onMounted。
我该怎么做？
模板：
<q-card>
<board-item-list :items="items" v-if="items.length" />
<board-empty v-else />
</q-card>脚本
import { reactive, onMounted } from "vue";
import { posts } from "./fake-data.js";
export default {
setup() {
let items = reactive([]);
...
onMounted(() => {
// to fill the items with posts.
items.values = posts; // I tried this not working
items = posts; //I tried this not working
console.log(items);
});
...
return {
...
items,
};
},
};回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-08 13:03:28
尝试使用ref而不是reactive，或者将items定义为处于反应性状态的嵌套字段，如下所示：
import { reactive, onMounted } from "vue";
import { posts } from "./fake-data.js";
export default {
setup() {
let state= reactive({items:[]});
...
onMounted(() => {
state.items = posts;
console.log(state.items);
});
...
return {
...
state,
};
},
};在模板中：
<q-card>
<board-item-list :items="state.items" v-if="state.items.length" />
<board-empty v-else />
</q-card>如果您想去掉模板中的state，可以使用toRefs
import { reactive, onMounted,toRefs } from "vue";
import { posts } from "./fake-data.js";
export default {
setup() {
let state= reactive({items:[]});
...
onMounted(() => {
state.items = posts;
console.log(state.items);
});
...
return {
...toRefs(state),//you should keep the 3 dots
};
},
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69103568
复制相关文章
相似问题
腾讯云开发者
