Laravel & Inertia.js - 反應性問題 (vue3)

Question

會不會是 Inertia.js 頁面組件阻礙了 vue 的反應性？

我有一個 Page 組件，在這個組件中是一個普通的單文件組件。

我有一個 function 將項目添加到ItemsManager.items object。 當我運行這個 function 時，下面的單個組件不會在v-for中添加這些項目。 但是，當我重新加載頁面組件時，它會起作用，並且會出現以前添加的項目。

這里是單個文件組件：

<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>

實用程序.js：

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

function 添加項目（在頁面組件中）：

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

提前致謝！

Answer 1

由於您使用的是 Vue2，因此您需要知道在向對象/數組添加/刪除內容時有一些注意事項。 您沒有顯示任何與您將內容添加到 object 的實際方式相關的任何代碼，但我仍然建議您查看此頁面以了解並解決您的問題。

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