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;
        });

我对每个项目都有一个click方法，从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);
    },

VueJs - DOM没有更新数组变异

1 个答案: