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