Laravel & Inertia.js - reactivity problem (vue3)

Question

could it be that Inertia.js page components are blocking the reactivity of vue?

I have a Page component, in this component is a normal single file component.

I have a function that adds items to the ItemsManager.items object. When I'm running this function the single component below doesnt adds this items in the 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:

export const ItemsManager = {
    items: [],
    add(item) {
        item.$key = this.items.length;
        this.items.unshift(item);
    },
};

function that adds the items (in page component):

addItem(title, options) {
    ItemsManager.add({
        name: title,
        options: options
    });
},

Thanks in advance!

tony19 · Accepted Answer · 2022-07-15 04:30:47Z

0

Since you're using Vue2, you need to know that there are some caveats when adding/deleting things to Objects/Arrays. 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.

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

edited Jul 15, 2022 at 4:30

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 25, 2021 at 17:52

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hannes A Over a year ago

Thank you for your answer. I'm using vue3 and I added the missing code in the question.

kissu Over a year ago

You're maybe using Vue3 but with option API syntax, so Vue2 essentially. Otherwise, please provide the correct vue3. The unshift here, looks fine. What do you vue devtools tell you once you call your add method ?

Hannes A Over a year ago

In the devtools the object stays empty. But when I'm refreshing the page component with the <breeze-nav-link /> component, the previously added items appear in the object and vue renders them.

Collectives™ on Stack Overflow

Laravel & Inertia.js - reactivity problem (vue3)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related