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

debugcn 发表于 Dev

阿尔卡杜尔

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

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

我如何更改数组值：

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>

阿克斯

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。