У меня есть метод в корневом экземпляре 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.
Вы все исправили проблему, но мы могли бы записать ее. 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);
}