v-for循環(huán)生成的列表中動態(tài)改變某個組件的屬性

一、需求描述

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

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容