反应性内部的Vue -组合API数组没有在DOM中更新。
反应性内部的Vue -组合API数组没有在DOM中更新。
提问于 2021-09-08 04: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 05: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
复制相关文章
相似问题
Vue组合API在v-for内部不是反应性的？
Vue组合反应性属性在组件中没有更新。
Vue 3数组的组合API - ref() vs反应性()
没有在模板Vue3组合API上更新反应性对象。
Vue组合API和反应性类
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
