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列表项不能在状态变化时重新渲染

回答

相关问题