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