状態変更時に再表示されないVueリスト項目

Question

ユーザーのボタンをクリックするとオブジェクトの配列がいくつか表示されます。新しい配列を取得して、表示結果を表示します。

2番目の配列を取得するまで問題なく動作します。 1つの要素で最初の配列を取得した後、2つの要素で配列を取得すると、2つ目の要素だけが変更（追加または削除）されます。 issuesがどのように見えるか

fetchAsync(result){ 
    this.issue = result.body; 
} 

：私は、配列の値を変更する方法

？

const issues = [ 
    { 
    "id":100, 
    "key":"DEMO-123", 
    "summary":"Demo issue description", 
    "devices":[ 
     { 
     "id":100, 
     "name":"iPhone6S", 
     "browsers":[ 
      { 
      "id":100, 
      "name":"Safari", 
      "displayVariants":[ 
       { 
       "id":100, 
       "issueKey":"DEMO-123", 
       "state":1, 
       "browserName":"safari", 
       "user":"user-1", 
       "landScope":false 
       } 
      ] 
      } 
     ] 
     } 
    ] 
    } 
] 

と変更された値は、ネストされた変更が表示されたときに、このコンポーネントを再描画するためにVueのを強制的にどのようissues[].devices[].browsers[].displayVariants[].state

のですか？

---

[EDIT]

私はこのような問題のレンダリング：

<tr v-for="issue in issues"> 
    <td> 
     <div>{{ issue.key }}</div> 
     <div class="issue-description">[ {{ issue.summary }} ]</div> 
    </td> 
    <template v-for="d in issue.devices"> 
     <td v-for="browser in d.browsers"> 
     <!--{{ d }}--> 
      <device v-for="variant in browser.displayVariants" 
        :variant="variant" 
        :browserId="browser.id" 
        :issueKey="issue.key" 
        :issueId="issue.id" 
        :deviceId="d.id"></device> 
     </td> 
    </template> 
    </tr> 

とdeviceをテンプレート

<template> 
    <svg viewBox="0 0 30 30" class="mobileSVG" @click="changeState" :class="[state, {landscape: variant.landScope}]"> 
    <use xlink:href="#mobile"/> 
    </svg> 
</template> 

Answer 1

を行うことができますので、私はあなたのリストにキーを追加すると思いますか制限1を克服するために

問題を解決します：

https://vuejs.org/v2/guide/list.html#key

vueはDOMを最小限に変更しようとします。最初の項目は変更されていないと考えられ、再レンダリングされません。あなたのケースでは、あなたはすでにidを持っています。これをキーとして問題を解決する必要があります。

Answer 2

Vueが配列に行われ、以下の変更を検出することはできません。 ここにはdocumentationがあります。

1. インデックスを持つアイテムを直接設定すると、 vm.items [indexOfItem] = newValue
2. たとえば、配列の長さを変更すると、次のようになります。 vm.items.length = newLength

vm

コンポーネントインスタンスを指します。制限2については

Vue.set(items, indexOfItem, newValue) 

を：：

items.splice(newLength) 

あなたのケースであなたが

this.$set(this.issues[0].devices[whateverIndex].browsers[anyIndex].displayVariants, indexOfVariant, valueOfVariant)