Обновление массивов не перерисовывается в Vue даже при использовании Vue.set

Question

У меня проблемы с редактированием элементов, созданных Vue, он всегда получает неправильный индекс элемента для замены при редактировании. Я понимаю, что Vue не может реагировать на определенные изменения, например длину массива, поэтому я использую методы, предложенные в Vue документах

Однако они тоже не работают. Я подозреваю, что это как-то связано с моей настройкой. Пожалуйста, смотрите ниже.

NB

• myData - это Объект, отправляемый в качестве опоры.
• Этот код отлично работает при извлечении данных из API (т.е. на статических данных, где индекс не изменился)
• Целью кода ниже является:
  1. Добавление дочернего элемента в массив
  2. Редактировать этого ребенка с помощью:
     • поиск индекса childs по его идентификатору
     • замена этого потомка новым объектом с отредактированными данными
     • в настоящее время индекс любого добавленного потомка всегда равен 0, поэтому он заменяет первый дочерний объект в массиве, а не сам по себе
• Результат передается в главное приложение vue, где оно обновляет значение myData в Data и передает данные в дочерние компоненты через props

Добавление элемента

methods: {
      localSave() {
            const myLocalData = this.myData 
            const myChildrenLength = myLocalData.children.dependents.length
            const myChildren = {
                'id': myChildrenLength + 1,
                'fullName': this.childsFullName, 
                'gender': this.childsGender, 
                'dateOfBirth': this.childsYearOfBirth, 
                'parentage': this.childsParentage, 
                'isFinanciallyIndependent': this.childsDependency 
            }

            Vue.set(myLocalData.children.dependents, myChildrenLength, myChildren);

            localStorage.setItem('myData', JSON.stringify(myLocalData));
            this.$emit('send-local-data', myLocalData);
        }
}

Редактирование элемента

methods: {
      localEditSave() {
            const myLocalData = this.myData;
            const myChild = {
                'id': this.childsId,
                'fullName': this.childsFullName, 
                'gender': this.childsGender, 
                'dateOfBirth': this.childsYearOfBirth, 
                'parentage': this.childsParentage, 
                'isFinanciallyIndependent': this.childsDependency 
            }

            const arrayPath = myLocalData.children.dependents;
            let removeIndex = arrayPath.map(function(item) { return item.id; }).indexOf( myChild.id );

            Vue.set(arrayPath, removeIndex, myChild);

            console.log('localEditSave removeIndex = ', removeIndex)

            localStorage.setItem('myData', JSON.stringify(myLocalData));
            this.$emit('send-local-data', myLocalData);
        },
    }

Answer 1

На основании того, что вы предоставили, похоже, что вы, возможно, работаете с родительским компонентом, который имеет список данных, и пытаетесь манипулировать дочерними элементами в дочерних компонентах.

В вашем коде вы делаете какой-то сложный код, по-видимому, чтобы найти индекс элемента, который вы редактируете (или пытаетесь удалить). Данные принадлежат родительскому компоненту, поэтому все, что вам нужно сделать, это уведомить родительский элемент о выполнении некоторой функции.

Этого легче всего достичь, предоставив индекс дочерним элементам при их создании и записав событие, генерируемое дочерним элементом - в родительском шаблоне ...

v-for="(item, index) in itemList" index="index" v-on:DeleteItem="deleteItem(index)"

Дочерний компонент выполняет следующие действия ...

$emit("DeleteItem", this.index) 

и это весь код, который вам нужен. Не нужно создавать временный элемент, не нужно искать по всем элементам - просто попросите родителя удалить элемент с индексом n.

Тот же шаблон должен выполняться и для большинства других функций. При написании кода помните, что список данных принадлежит родительскому компоненту - вы не можете изменить его в дочернем элементе - т.е. вы не можете добавлять или удалять элементы из него в дочернем коде, все, что вы можете сделать, это уведомить это то, что вы хотите изменить его каким-то образом.

Ребенок может редактировать данные в элементе, потому что это не изменяет сам список.

Еще одна вещь, которая может помочь вам в том, что вы делаете, - это предоставить модель данных для ваших компонентов. В этом случае модель содержит данные, и все компоненты ссылаются на одну и ту же модель - это может устранить большую часть сложности решения проблем с родительскими / дочерними данными, поскольку все компоненты имеют равноправный доступ к одним и тем же данным.

Надеюсь, это поможет.

Answer 2

Таким образом, проблема заключалась в том, что я отправлял идентификатор в виде текста , поэтому, когда removeIndex сравнивал item.id с myChild.id, он возвращал 0

Я только что изменился

const myChild = {
      'id': this.childsId,

до

const myChild = {
      parseInt('id': this.childsId),

И теперь он работает как положено.