一、需求描述

通過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的圖片即可達到需求的目的。