[英]Laravel & Inertia.js - reactivity problem (vue3)
could it be that Inertia.js page components are blocking the reactivity of vue?会不会是 Inertia.js 页面组件阻碍了 vue 的反应性?
I have a Page component, in this component is a normal single file component.我有一个 Page 组件,在这个组件中是一个普通的单文件组件。
I have a function that adds items to the ItemsManager.items
object.我有一个 function 将项目添加到
ItemsManager.items
object。 When I'm running this function the single component below doesnt adds this items in the v-for
.当我运行这个 function 时,下面的单个组件不会在
v-for
中添加这些项目。 But when I'm reload the Page Component it works and the previously added items appear.但是,当我重新加载页面组件时,它会起作用,并且会出现以前添加的项目。
Here the single file component:这里是单个文件组件:
<template>
<div>
<div v-for="item in items" :key="item.$key">
test
</div>
</div>
</template>
<script>
import { ItemsManager } from "./utils.js";
export default {
name: "test-component",
data: () => ({
items: ItemsManager.items
}),
};
</script>
utils.js:实用程序.js:
export const ItemsManager = {
items: [],
add(item) {
item.$key = this.items.length;
this.items.unshift(item);
},
};
function that adds the items (in page component): function 添加项目(在页面组件中):
addItem(title, options) {
ItemsManager.add({
name: title,
options: options
});
},
Thanks in advance!提前致谢!
Since you're using Vue2, you need to know that there are some caveats when adding/deleting things to Objects/Arrays.由于您使用的是 Vue2,因此您需要知道在向对象/数组添加/删除内容时有一些注意事项。 You don't show any code relevant to your actual way of adding stuff to your object, but I can still recommend that you'd check this page to understand and fix your issue.
您没有显示任何与您将内容添加到 object 的实际方式相关的任何代码,但我仍然建议您查看此页面以了解并解决您的问题。
https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.