コンポーネントはプロパティの変更に反応しません[インデックスによってアクセスされる配列メンバ]

Question

同じVueインスタンスの「データ」オブジェクトの一部のデータを更新するメソッドがルート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 
} 

ルートVueのインスタンスになっている私は、Vueのを持っていますルートインスタンスのデータオブジェクト内の "recipesArr"にバインドされた "recipesarr"プロパティを持つコンポーネントです。

ここでは残念ながら、このVueのコンポーネントが私の「updateRecipe」機能に「recipesArr」によって行われた変更に反応しない

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

「レシピリスト」と呼ばれる私のVueのコンポーネントがあります。なぜこれが当てはまり、root Vueインスタンスの "recipesArr"に対する変更に対応するにはどうしますか？

以下の画像からわかるように、「recipesarr」プロパティが更新されました。しかし、私は2あなたはすべての問題を修正しました

Answer 1

に4から「servingsNum」を変更したときにVueのコンポーネントが更新されませんが、我々はダウンし、それにも権利があります。 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); 
}