Vue列表項不能在狀態變化時重新渲染

我有一些對象數組，當用戶單擊按鈕我獲取新數組並顯示一些結果。Vue列表項不能在狀態變化時重新渲染

它工作正常，直到我獲取第二個數組。當我用一個元素獲取第一個數組，然後使用兩個元素獲取數組時，它會更改（添加或刪除）第二個元素。

如何改變陣列值：

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

issues怎麼樣子？

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 
       } 
      ] 
      } 
     ] 
     } 
    ] 
    } 
]

和被改變的值是issues[].devices[].browsers[].displayVariants[].state

如何強制Vue的嵌套時出現的變化來重新描繪這個組件？

[編輯]

我呈現的問題是這樣的：

<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>

來源

2017-03-31 Alcadur

我想這個問題就是和你一起渲染的方法，請你粘貼一下嗎？您是否使用每個動態條目的密鑰？ – aks

@aks我添加了呈現'問題'的模板 – Alcadur

我想加入鍵列表將解決問題：

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

vue會嘗試對DOM做最小的更改，並認爲第一項沒有更改，因此不會重新呈現。在你的情況下，你已經有id，使用它作爲關鍵應該解決問題。

來源

2017-04-01 07:27:45 aks

Vue公司無法檢測到陣列進行了如下修改。這是documentation。

當您直接設置具有索引的項目時， vm.items [indexOfItem] = newValue

當您修改數組的長度時，例如， vm.items.length = newLength

vm指組件實例。

爲了克服的侷限性1做：

Vue.set(items, indexOfItem, newValue)

對於限制2：

items.splice(newLength)

所以你的情況，你可以做

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

來源

2017-03-31 23:09:04

Vue列表項不能在狀態變化時重新渲染

回答

相關問題