VueJs - DOM не обновляется при мутации массива

Question

VueJs - DOM не обновляется при мутации массива

1

У меня есть модель, в которой я инициализирую массив с успехом 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 все еще показывает элемент.

Я также заметил, что когда я жестко кодирую значение selectableItems в ajax, все работает так, как ожидалось!

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

Я знаю о предостережениях мутации массива в vue. Но я чувствую, что у меня отсутствует кое-что основное, поскольку я только начал изучать Vue. Может кто-то указать на то, что мне не хватает?

HS Krishna 05 авг. 2017, в 12:16

Источник

1

Используете ли вы Array.prototype.pop() для this.selectableItems.pop(item); ? Какой аргумент? developer.mozilla.org/en/docs/Web/JavaScript/Reference/...
choasia 05 авг. 2017, в 09:36
0

ах довольно глупо с моей стороны! я был настолько увлечен изучением концепций vuejs, что забыл определение для array.pop (). Спасибо, в любом случае!.
HS Krishna 05 авг. 2017, в 10:40

Теги:

javascript

arrays

vue.js

1 ответ

Ещё вопросы

Используете ли вы Array.prototype.pop() для this.selectableItems.pop(item); ? Какой аргумент? developer.mozilla.org/en/docs/Web/JavaScript/Reference/...
ах довольно глупо с моей стороны! я был настолько увлечен изучением концепций vuejs, что забыл определение для array.pop (). Спасибо, в любом случае!.

Vamsi Krishna · Accepted Answer · 2017-08-05T08-06-00.000Z

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