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

关于Vue3怎么让组件强制刷新的详细方法、常见场景及最佳实践 在 Vue3 中,组件的更新通常由响应式数据变化驱动,但某些场景下可能需要手动强制刷新组件。 阅读详情

在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中子组件修改父组件传入的prop,并向父组件$emit一个广播事件 1、在vue中:        prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。       另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了,Vue 会在控制台给出警告。 更多可参考:https://cn. 阅读详情

相关推荐

Vue 3 KeepAlive缓存魔法:如何精准刷新单个路由组件而不影响其他缓存?

在 Vue 3 使用 <keep-alive> 缓存多个路由组件时,传统动态修改缓存列表的方案会导致全局缓存重新计算

weixin_44982333的博客 875

antd a-list 添加分页

分页最主要的代码: pagination。computed 在页面首次渲染时。

努力搬砖的小码 1202

地瓜机器人RDK Studio使用入门教程

不知道大家在使用AI开发板的时候有没有遇到过板子官方镜像占据空间大难以保存,想要的时候找不到?官方示例项目久而久之便难以找寻?首次登陆开发板连接网络还需要准备显示器键盘鼠标外设繁杂?…为了解决平时开发过程中遇到的种种不便利问题,地瓜机器人创新的推出了RDK Studio这一官方开发者软件,使智能机器人开发迎来新纪元!通过这一软件极大降低了机器人的开发门槛,哪怕是零基础的用户亦可轻松上手RDK系列板卡!

xiongqi123123的博客 3430

新建SpringBoot项目:Vue3数据绑定显示列表数据(动态数据,ebooks)

接:新建SpringBoot项目:Vue3数据绑定显示列表数据(静态数据)

lm19770429的专栏 975

Lumerical官方案例、FDTD时域有限差分法仿真学习(三)——环形谐振器(Ring resonator)之第二&第三部分

二、使用 MODE 的参数提取和蒙特卡罗 三、最终参数提取

weixin_45719141的博客 1万+

ADI DSP开发环境(CCES)下的程序烧录问题(以ADSP-SC589为例)

在CCES环境下将程序烧录到flash主要有两种方式。首先在对项目编译产生文件的属性设置为Release。 在编译完成后,找到每个CORE单独生成的DXE文件: 文件通常位于项目目录下每个core的Release文件中。安装SC589评估板的驱动(ADSP-SC5xx_EZ-KIT_Lite-Rel2.0.0.exe)后,在安装目录下可以找到SPI FLASH芯片的驱动程序(sc589_w25q128fv_dpia_Core1.dxe): 把文件copy到CCES 的目录下由于SC58x处理器的特殊性

daijingxin的博客 3730

ant design a-avatar 使用本地图片

【代码】ant design a-avatar 使用本地图片。

qq_32880013的博客 744

安时积分法和开路电压法结合估算锂电池SOC

基于安时积分法和开路电压法结合的锂电池SOC估计Simulink仿真建模,利用安时积分法计算放电过程中的SOC,在搁置状态利用开路电压法进行SOC修正。

qq_39304296的博客 2556

Ant Design pro of vue如何使用a-list的分页设置

在代码中找到图片中的这个位置,写一个pagination来动态配置a-list的pagination分页。在data的return 中设置pagination的配置。

m0_52513940的博客 3150

Win10+Anaconda环境下PaddleOCR保姆级安装指南(附常见报错解决方案)

本文提供Win10+Anaconda环境下PaddleOCR的保姆级安装指南,涵盖从环境配置到模型部署的全流程,特别针对常见报错提供解决方案。通过详细的步骤说明和实用技巧,帮助开发者快速完成PaddleOCR安装与测试,避免常见陷阱,提升OCR开发效率。

weixin_29096377的博客 375

osg点云加载与渲染

osg点云加载与渲染

cangqiongxiaoye的博客 821

vue强制刷新(更新数据)的三种方式

vue强制刷新(更新数据)的三种方式及用法

qq_40224032的博客 2万+

【QT开发教程】QMatrix4x4类详解及实战应用:Qt中的4x4矩阵变换

在计算机图形学和三维图形应用中,矩阵变换是一个核心概念。Qt框架提供了QMatrix4x4类,用于处理4x4矩阵变换,帮助开发者在三维空间中进行复杂的几何计算。本文将深入探讨QMatrix4x4的功能及其在Qt应用中的实际应用。

科技改变人类,技术成就未来 726

Vue 之组件通信、页面刷新

主要记录在工作中对于父子组件之间的传值和刷新。 知识点我总是模糊,记录下来方便自己查看,欢迎大家给建议。 ????我的个人博客???? 组件通信        这里我主要整理父子组件之间的通信,父子只是一个比喻,只要是存在组件的嵌套统称理解为父子组件,其实我更喜欢叫它们嵌套组件之间的传值。如果是子组件和子组件通信,好像 Vue 中并没有一个直接的传递方法,建议是把两个组件合并起来,一面后面造成不必要的麻烦,其实也可以使用状态管理工具

爱勇宝 1119

SAP BOM批量反查代码分享

SAP BOM反查批量查询代码分享

我小时候很黑的博客 4972

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

vue列表数据删除后刷新页面

在页面进行增删改列表后,页面需要进行刷新,在进行这些操作后,需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。

Java学习之旅 2683

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

vuejs对象更新渲染_vue.js,_Vue 列表渲染中修改数组元素(对象)的某个属性,但不能触发视图更新。,vue.js - phpStudy...

Vue 列表渲染中修改数组元素(对象)的某个属性,但不能触发视图更新。评论 已有{{replies.length}}回复 {{reply.author.loginname}}发帖时间:{{reply.create_at}}{{reply.ups.length}}{{{reply.content}}}确定export default {data: function(){re...

weixin_39766867的博客 131

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

Vue-Ant Design Pro of Vue-配置App.vue通过router-view组件实现局部刷新

项目实际开发中,很多地方经常需要一些局部刷新功能。如:创建后返回列表,修改后返回列表,局部操作刷新… 如何简洁有效的实现局部刷新呢,在Ant Design Pro of Vue中,我们可以通过router-view组件来定义一个属性来实现局部刷新。并且在入口文件配置后,可以在项目任何地方使用,非常方便。 Ant Design Pro of Vue-入口App.vue 下载好Ant Design P...

谷子的博客 5680

Vue进阶(幺伍零):巧用 key 提升页面渲染性能及触发生命周期函数

当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 key的两种应用场景 在列表渲染时使用key属性 假设Vue实例的data属性中有一个叫numbers的变量,它的值是[1, 2, 3, 7, 8, 9]: <div v-for="num in numbers"> {{num}} </div>

IT全栈 华强工作室 3845

解决新增编辑页面数据回显不正确的问题——三种 vue 组件强制刷新方法

解决table 列表的新增编辑页面,功能复杂时,封装子组件导致数据回显不正确问题,目前想到比较好的方法是组件强制刷新。vue 组件强制刷新有三种方式:$forceUpdate、v-if、key属性,这里推荐使用 key 属性。

Girasol_YRR的博客 4949

vue——执行增删改操作后刷新页面

一、使用场景 使用vue开发管理后台页面,执行增加删除修改的功能后,列表并不会马上显示最新的数据,需要刷新当前页面获取到最新的数据,但使用window.reload( ) 或 router.go(0)的话整个浏览器会重载,用户体验不太友好。 那么推荐使用provide / inject 的方法来解决这个需求。 二、provide/inject方法 vue官方文档:这对选项需要一起使用,以允...

weixin_40677985的博客 5612

vue项目实现返回不刷新、其他菜单进入刷新。keep-alive的用法

项目背景: 查询列表进入详情页,返回时列表页不刷新 从其他菜单页进入查询列表,列表刷新 实现 方案一:详情页通过模态窗口展示。 方案二:详情页通过跳转,使用keep-alive处理。 1.渲染组件配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> &lt...

weixin_34112181的博客 1946

vue父组件的值刷新后子组件不刷新

父组件: <pick-country v-show="modal_show" @func="getMsgFromSon(arguments)" :content="pick_content_show"></pick-country> method方法 //组件传值 getMsgFromSon(data){ const that = this; setTimeout((...

qq_31942091的博客 2814

vue 修改对象的值视图没有发生改变_Vue对象属性改变,视图却不刷新问题解决...

问题需求如下:文件上传列表这是一个文件上传Modal,使用了antd的Upload组件,但是没有使用组件自带的文件列表,而是自定义了一个列表。想要的效果是,文件列表后面的动作根据文件上传状态改变,如还未上传时是“等待上传”,上传开始时是“上传中”,上传完成后变成“下载”。由于对Vue的学习还停留在会用的阶段,并没有太深入的研究,所以,在解决这个问题时,走了一些弯路,现将在解决问题中走的弯路也了并记...

weixin_39935654的博客 721

初学Vue遇到的计算属性不刷新的问题

项目场景: Vuex中定义了一个列表,在组件中想要读取列表数据进行展示,其中选择按钮的是否选中取决去对象中的check属性 问题描述: 组件内动态绑定class,采用了计算属性去返回true或者flase,添加点击事件,当点击div时对Vuex中对应的布尔值取反。但实际运行只有第一次加载页面时能正常显示,之后无法正常切换,在点击事件中打印CartList[index].check却能正常切换true,flase 后来将计算属性依赖于data时点击可以正常切换,通过搜索了解到计算属性是依赖于da...

u012745755的博客 1万+

Vue-5【列表渲染、DOM模板、子组件data、ref属性】

一.列表渲染 (1).input临时数据保留 vue只会处理上面的列表,但是下面的input临时的输入则不跟随上方的列表改变而改变,留在原地了 为了解决这个问题用key (2).数组数据保留 :key="item.xx" <div id="root"> <div v-for="(item,index) of list" :key = "item.id"> {{item}}-{{index}} </di

Yesterday_Tomorrow的博客 447
上一篇: centos 7 修改kubelet工作目录
下一篇: pyqt5 分割瓦片显示超大图像
ZH_CS
博客等级 码龄15年 6粉丝 19原创
评论
成就一亿技术人!
拼手气红包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、付费专栏及课程。

余额充值