Vue 列表项不会在状态更改时重新呈现

Question

我有一些对象数组，当用户单击按钮时，我获取新数组并显示一些结果。

它工作正常，直到我获取第二个数组。当我用一个元素获取第一个数组，然后用两个元素获取数组时，它只会更改（添加或删除）第二个元素。

我如何更改数组值：

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>

Answer 1

我认为将键添加到您的列表中可以解决问题：

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

Vue 尝试对 DOM 进行最小的更改，并认为第一项没有更改，因此不会重新渲染。在您的情况下，您已经拥有id，使用它作为密钥应该可以解决问题。

Answer 2

Vue 无法检测到对数组所做的以下更改。这是文档。

1. 当您直接设置带有索引的项目时，例如 vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如 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)