Is it possible that the reactivity of Vue is being blocked by Inertia.js page components?
Within my Page component, there is a single file component.
I have a function that adds items to the ItemsManager.items object.
When I run this function, the single component below doesn't display these items in the v-for.
However, when I reload the Page Component, it works and the previously added items appear.
Here's the code for 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() {
return {
items: ItemsManager.items
};
}
};
</script>
utils.js:
export const ItemsManager = {
items: [],
add(item) {
item.$key = this.items.length;
this.items.unshift(item);
},
};
Function that adds the items (in the page component):
addItem(title, options) {
ItemsManager.add({
name: title,
options: options
});
},
Thank you in advance!