vue中給請求到的數據對象加屬性問題


今天發現了個很奇怪的問題,我在做一個:點擊列表  使點中的列表項變色的功能,而且是多個大列表項,在每個大列表項里點擊切換列表項的時候不影響其他大列表項的選項。

解決思路,因為這些大列表項是請求到的數據v-for出來的,大列表項里的小列表項也是用大列表項里的數據v-for出來的,所以我選擇在請求導數據時,給每個小列表項數據加一個isSelect屬性,賦值false,

然后在小列表項上面綁定一個class,條件是判斷isSelect屬性等於某個值,然后這個class就綁定上去,上個代碼看看:

<li class="specification" v-for="(groupSpec, groupIndex) in productGroupSpec" :key="groupIndex">
<button :disabled="spec.i" v-for="(spec, itemIndex) in groupSpec.values" :key="itemIndex"
@click="clickSpec(groupIndex, itemIndex, groupSpec.specName, spec.specValue,spec.isSelect)"
:class="{orange:spec.isSelect&&spec.isSelect==1}"
>{{spec.isSelect}}</button>
<!-- :disabled="spec.i" -->
</li>
 
我在請求到數據后先把數據賦值給了productGroupSpec,然后再用循環給productGroupSpec里的小列表項里的每一個列表項加了isSelect屬性,並賦值為0,結果試了試,點擊頁面上的小列表項時,並沒反應,然后問了問老同志,
因為vue的特性,變量里是沒有getSet方法的,所以后續再點擊事件里改變isSelect的值時,vue是捕捉不到isSelect的值變化的,所以,要在給productGroupSpec賦值前,給response里的每個小列表項加上isSelect屬性,然后再把response賦值給productGroupSpec,
這樣,我們點擊小列表項時才能捕捉到isSelect值的變化,估計大家沒明白是什么意識,最后總結一句,如果要給請求來的數據加屬性,要在剛剛初始化的時候加屬性,不要先把請求到的數據賦值給變量后再加屬性,否則就會出現這個屬性值變化時,vue捕捉不到。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM