一、需求描述
通過v-for生成一個清單,每條記錄都包含一個q-btn。要求能夠動態(tài)調整一行或者多行的btn的loading狀態(tài),以標識出哪幾行正在進行處理中。
二、難點
這個需求的難點就在于,經過循環(huán)的渲染,原先通過變量定義的動態(tài)屬性都靜態(tài)化了,如何繼續(xù)讓這些屬性動態(tài)化?這樣才能通過程序對這些屬性進行動態(tài)調整。
三、解決方法
經過分析,原先的思路就不可行。因為在v-for后,經過渲染原先動態(tài)的屬性都靜態(tài)化了,此時是無法再次對其進行動態(tài)調整的,即使通過this.$refs的方法可以強制調整組件的某個屬性值,但此時系統(tǒng)報錯。
因此只能采用另外的解決方法,即不再使用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>
這樣后續(xù)只需要通過??this.$refs["leftpic" + pindex][0].src??的方式調整img的圖片即可達到需求的目的。