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
引用组件实例
要克服限制,请执行以下操作:
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)