v-for循环生成的列表中动态改变某个组件的属性

一、需求描述

通过v-for生成一个清单,每条记录都包含一个q-btn。要求能够动态调整一行或者多行的btn的loading状态,以标识出哪几行正在进行处理中。

二、难点

这个需求的难点就在于,经过循环的渲染,原先通过变量定义的动态属性都静态化了,如何继续让这些属性动态化?这样才能通过程序对这些属性进行动态调整。

三、解决方法

经过分析,原先的思路就不可行。因为在v-for后,经过渲染原先动态的属性都静态化了,此时是无法再次对其进行动态调整的,即使通过this.$refs的方法可以强制调整组件的某个属性值,但此时系统报错。

因此只能采用另外的解决方法,即不再使用q-btn的loading的方式,改为如下方式:

<template v-for="(ff,index) in array_list">
      。。。。。。
      <img src="statics/question.png" style="width:30px;height:30px;" :ref="`leftpic${index}`">
      。。。。。。
</template>

这样后续只需要通过  this.$refs["leftpic" + pindex][0].src  的方式调整img的图片即可达到需求的目的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容