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

Vue无法检测到对阵列进行的以下更改。这是documentation。

直接设置带索引的项目时，例如   vm.items [indexOfItem] = newValue

修改数组的长度时，例如： vm.items.length = newLength

vm指的是组件实例。

要克服限制，请执行以下操作：

Vue.set(items, indexOfItem, newValue)

限制2：

items.splice(newLength)

所以在你的情况下你可以做

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

Answer 2

我认为在列表中添加密钥可以解决问题：

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

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

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

2 个答案: