在vue中,如果data中有一个元素 fileList 使用了列表显示,当fileList对象发生变化时,显示组件会跟随刷新,但是当fileList内的元素某个值发生变化是,其绑定的组件是不刷新的。
示例:
<template>
<a-list item-layout='horizontal' :data-source='receiveFile'>
<a-list-item slot='renderItem' slot-scope='item,index'>
<a-list-item-meta :description='item.des'>
<a slot='title' @click='itemClick(item,index)'>{{ item.name }}</a>
<a-avatar
slot='avatar'
style='height: 16px; width: 16px; margin-top: 16px'
:src='getIcon(item)'
/>
</a-list-item-meta>
</a-list-item>
</a-list>
</template>
export default {
data() {
return {
receiveFile: []
}
},
methods: {
itemClick(item, index) {
let key = item.name
if (item.checked) {
item.checked = false
delete (this.selectFile[key])
} else {
item.checked = true
this.selectFile[key] = item
}
this.$set(this.receiveFile, index, item)
}
}
}
当我需要根据点击item改变其选中状态,然后调用getIcon方法设置不通的图标时发现,单独对其item做操作,不会触发list组件的自动刷新。
根据参考链接中提示的办法皆不可用
用v-if控制显示来刷新,只有第一次点击可用,具体的原因咱也没参透。
list组件是用的ant design 封装的,也不想再做修改。
至于其他如调用$forceUpdate()方法,亦无效果。
受到了链接4的启发,只有在对象层面改变,才能触发列表的刷新,于是在 itemClick 点击事件方法中使用
this.$set(this.receiveFile, index, item)
就可以触发组件的自动刷新
参考连接:
[1] vue强制刷新组件的3种方法_sinat_41883985的博客-CSDN博客_vue强制刷新组件