javascript - Vue 列表项在状态更改时不会重新渲染

Question

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

在我获取第二个数组之前它工作正常。当我获取第一个包含一个元素的数组，然后获取包含两个元素的数组时，它仅更改(添加或删除)第二个元素。

如何更改数组值:

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

更改的值是 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>

和设备模板

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

Answer 1

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

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

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