VUE 列表组件刷新 修改元素内属性 触发列表刷新

本文探讨了在Vue中,如何确保列表组件随数据数组中单个元素状态变化而自动刷新。通过实例展示了如何使用$set方法实现Vue数据的深度更新,并引用相关链接提供了多种刷新策略,包括$forceUpdate和避免过度使用v-if。

在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的博客-优快云博客_vue强制刷新组件

[2]Limfx-专业的科研工作者内容发布平台

[3]vue $set修改数组 - 青青子衿619 - 博客园

[4]Vue中,$forceUpdate()的使用 - 知乎

Vue2 中,触发组件刷新时让兄弟组件刷新可以采用以下方法: ### 1. 使用 `provide/inject` 方法 此方法适用于当前页面中有 `router-view` 的情况。在 `App.vue` 里声明 `reload` 方法,通过控制 `router-view` 的显示或隐藏来控制页面的再次加载。 ```vue <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data () { return { isRouterAlive: true } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(function () { this.isRouterAlive = true }) } } } </script> ``` 在需要用到刷新的页面,注入 `App.vue` 组件提供(`provide`)的 `reload` 依赖,在逻辑完成之后(删除或添加等操作),直接 `this.reload()` 调用,即可刷新当前页面,从而实现兄弟组件刷新 [^2]。 ### 2. 事件总线(Event Bus) 创建一个事件总线对象,用于在组件之间传递事件。 ```javascript // event-bus.js import Vue from 'vue'; export const eventBus = new Vue(); ``` 在触发组件刷新的地方,通过事件总线发送一个自定义事件: ```vue <template> <!--组件模板 --> </template> <script> import { eventBus } from './event-bus.js'; export default { methods: { refreshChildAndSiblings() { // 触发组件自身刷新逻辑 // ... // 发送事件通知兄弟组件刷新 eventBus.$emit('refresh-siblings'); } } } </script> ``` 在兄弟组件中监听该事件并执行刷新逻辑: ```vue <template> <!-- 兄弟组件模板 --> </template> <script> import { eventBus } from './event-bus.js'; export default { created() { eventBus.$on('refresh-siblings', this.refresh); }, beforeDestroy() { eventBus.$off('refresh-siblings', this.refresh); }, methods: { refresh() { // 兄弟组件刷新逻辑 // ... } } } </script> ``` ### 3. Vuex 状态管理 如果项目中使用了 Vuex,可以通过修改 Vuex 中的状态来触发组件的重新渲染。 在触发组件刷新时,提交一个 mutation 来修改 Vuex 中的状态: ```vue <template> <!--组件模板 --> </template> <script> export default { methods: { refreshChildAndSiblings() { // 触发组件自身刷新逻辑 // ... // 修改 Vuex 状态 this.$store.commit('refreshSiblings'); } } } </script> ``` 在兄弟组件中,通过计算属性监听该状态的变化,并在状态变化时执行刷新逻辑: ```vue <template> <!-- 兄弟组件模板 --> </template> <script> export default { computed: { shouldRefresh() { return this.$store.state.shouldRefresh; } }, watch: { shouldRefresh(newValue) { if (newValue) { // 兄弟组件刷新逻辑 // ... // 重置状态 this.$store.commit('resetRefreshFlag'); } } } } </script> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZH_CS

随缘吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值