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

2021-08-17  本文已影响0人  工程师54

一、需求描述

通过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的图片即可达到需求的目的。

上一篇下一篇

猜你喜欢

热点阅读