Компонент не реагирует на изменение свойства [член массива, доступный по индексу]

1

У меня есть метод в корневом экземпляре Vue, который обновляет некоторые данные в объекте "data" того же экземпляра Vue (см. Ниже).

Вот моя функция в объекте методов корневого экземпляра Vue

updateRecipe(newRecipe) {
   this.recipesArr[this.findRecipeIndex(newRecipe.id)] = newRecipe;
}

Вот мой объект данных в корневом экземпляре Vue

data: {
   recipesArr: JSON.parse(localStorage.getItem("storedRecipes")) // this is an array filled with objects
}

Затем у меня есть компонент Vue, который имеет свойство "recipesarr", связанное с "recipesArr" в объекте данных экземпляра корня.

Вот мой компонент Vue, называемый "recipe-list"

<recipe-list
   v-bind:recipesarr="recipesArr">
</recipe-list>

К сожалению, этот компонент Vue не реагирует на любые изменения, сделанные моей функцией "updateRecipe", на "recipesArr". Почему это так и как я могу реагировать на изменения, внесенные в "recipesArr" в корневом экземпляре Vue?

Как вы можете видеть на изображении ниже, свойство "recipesarr" обновлено; однако компонент Vue не обновляется, когда я меняю "servingsNum" с 4 на 2.

Изображение 174551

Теги:
vue.js
vuejs2
vue-component

1 ответ

3
Лучший ответ

Вы все исправили проблему, но мы могли бы записать ее. Vue не может обнаруживать изменения в элементах массива при непосредственном доступе к ним по индексу. Используйте splice() или Vue.set() для изменения членов массива, и ваши изменения будут обнаружены. так...

updateRecipe(newRecipe) {
   // Don't do this.
   this.recipesArr[this.findRecipeIndex(newRecipe.id)] = newRecipe;
   // Do this instead !
   this.recipesArr.splice(this.findRecipeIndex(newRecipe.id),1,newRecipe);
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню