Javascript 状态更改时未重新呈现Vue列表项

Javascript 状态更改时未重新呈现Vue列表项,javascript,arrays,vue.js,vuejs2,Javascript,Arrays,Vue.js,Vuejs2,我有一些对象数组,当用户单击按钮时,我获取新数组并显示一些结果 在我获取第二个数组之前,它工作正常。当我使用一个元素获取第一个数组,然后使用两个元素获取数组时,它只更改(添加或删除)第二个元素 如何更改数组值: fetchAsync(result){ this.issue = result.body; } 问题看起来怎么样 const issues = [ { "id":100, "key":"DEMO-123", "summary":"Demo issue d

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

在我获取第二个数组之前,它工作正常。当我使用一个元素获取第一个数组,然后使用两个元素获取数组时,它只更改(添加或删除)第二个元素

如何更改数组值:

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
              }
            ]
          }
        ]
      }
    ]
  }
]
而更改的值是
问题[]。设备[]。浏览器[]。显示变体[]。状态

当出现嵌套更改时,如何强制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>

Vue无法检测对阵列所做的以下更改。 这是你的电话号码

  • 当您直接使用索引设置项目时,例如。 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) 
    

    我认为在列表中添加键可以解决问题:


    Vue尝试对DOM进行最小的更改,并认为第一项没有更改,因此不会重新呈现。在您的情况下,您已经有了
    id
    ,使用该键应该可以解决问题。

    我认为问题在于您的渲染方法,请您粘贴它好吗?您是否为每个动态条目使用密钥?@aks我添加了一个模板,该模板呈现
    问题
    我使用的是idx密钥而不是我的item.id密钥,并且出现了错误的item内容的奇怪问题。。你救了我的命!
    this.$set(this.issues[0].devices[whateverIndex].browsers[anyIndex].displayVariants, indexOfVariant, valueOfVariant)