구성 요소가 속성 변경에 반응하지 않습니다 [인덱스에 의해 액세스되는 배열 멤버]

Question

동일한 Vue 인스턴스 (아래 참조)의 "데이터"개체의 일부 데이터를 업데이트하는 루트 Vue 인스턴스의 메서드가 있습니다. 여기

루트 뷰 인스턴스의 방법 객체 내 기능입니다

다음

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

루트에 내 데이터 객체 뷰 인스턴스

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

내가 다음 뷰를 가지고있다 루트 인스턴스의 데이터 객체에 "recipesArr"에 바인딩 된 "recipesarr"속성이있는 구성 요소입니다.

여기 불행하게도,이 뷰 구성 요소가 내 "updateRecipe"기능을 "recipesArr"에 의해 변경에 반응하지 않는

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

"조리법리스트"라는 내 뷰의 구성 요소입니다. 왜 그런가요? 루트 Vue 인스턴스에서 "recipesArr"에 대한 변경 사항에 어떻게 반응해야합니까?

아래 이미지에서 알 수 있듯이 "recipesarr"속성이 업데이트되었습니다. 그러나, 나는 2. 모든 문제를 해결 한

Answer 1

4에서 "servingsNum"를 변경할 때 뷰 구성 요소를 업데이트하지 않습니다,하지만 우리는 아래로도 잘 수 있습니다. Vue cannot detect changes to array members when you access them directly by index. 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); 
}