Vue 框架中遇到的訣竅
阿新 • • 發佈:2018-12-13
問題一、 我需要渲染陣列A,並根據 B陣列中是否存在A中,給A新增 選中狀態sel。
經過很焦慮的研究後,尋求幫助得到答案。
1、初始化資料時 A新增屬性flag(bool)標識,如果B中存在A中某個 就 flag=true。
2、渲染頁面時 使用關鍵 指令:class (v-bind) ,
{'select-tag': item.flag}解析: 當 item.flag 為 true時輸出 select-tag
<div class="block-tags" :class="['',{'select-tag': item.flag}]" v-for="(item,index) in defaultType" :data-id="item.id"> {{ item.name }} </div>
總結: 實戰驗實力
問題二、非同步獲取資料後 獲取到 B物件,於是乎我把 A = B , C = B ;
結果: 在使用當中,一旦 修改 ABC任意值,三個都會被修改。 這真是無語了。
最終解決方案:
使用了 JS:Object.assign Object.assign(target, ...sources)
這個簡直厲害了, A = Object.assign([], B); 這樣就解決問題了。
一級棒~!