javascript - VueJs - DOM 不更新数组突变

Question

我有一个模型，在模型安装后我在 ajax 成功时初始化一个数组

    var self = this;
    $.getJSON("somejson.json",
        function (data) {
            var list = [];
            list = data.list.map(function (item) {
                return { id: item.id, text: item.text };
            });

            self.selectableItems = list;
        });

我对这些项目中的每一个都有一个点击方法，可以从 selectableItems 中删除该项目

        select: function (item) {
            this.selectableItems.pop(item);
        },

selectableItems 最初呈现正确，但当我改变数组时，dom 没有更新。尽管实际数组正在被正确修改。

我通过计算属性来验证这一点，该属性返回 selectableItems 的计数。当项目被移除时，这个计数会正确更新，但 dom 仍然显示该项目。

我还注意到，当我在 ajax 中硬编码 selectableItems 的值时，一切都按预期工作!

self.selectableItems = [{ id: 1, text: "adsad"}];

我知道 vue 中数组变化的注意事项。但是我觉得我在这里缺少一些基本的东西，因为我刚刚开始探索 Vue。 有人可以指出我遗漏了什么吗？

Answer 1

Array.pop() 从数组中移除最后一项，它不接受任何参数。它只会删除您传递给它的任何参数的最后一项。

显示数组计数的计算属性作为最后一项被删除而不是您想要的项目的原因。

使用Array.splice()相反。

像这样将索引传递给您的点击方法:

<ul>
    <li v-for="(item, index) in selectableItems" @click="select(index)>{{item}}</li>
</ul>

脚本

select: function (index) {
        this.selectableItems.splice(index, 1);
    },