鍍金池/ 問答/HTML/ 想用vue實現(xiàn)商品規(guī)格的顏色排他，想要三三對應排他

想用vue實現(xiàn)商品規(guī)格的顏色排他，想要三三對應排他

后臺對象是這樣的圖片描述

我想實現(xiàn)這種效果，這是用jquery事件監(jiān)聽寫出來的圖片描述
但是 在vue是顯示 所有個span進行排他，只能實現(xiàn)如下效果圖片描述
代碼如圖圖片描述
想了好久 沒想出一個好的方法，求大神幫忙

目前是這樣的圖片描述
圖片描述 但效果是這樣的，可以實現(xiàn)多選 但沒有實現(xiàn)排他圖片描述

回答
編輯回答
艷骨

兩種方案：
（1）你重新組裝后臺返回的數(shù)據(jù)，組裝成：
內存：[{name: '8G', active: false}, {name: '16G', active: false}, ....]
的形式。
然后@click="changeItem(items, k)"; 方法：changeItem(items, item) { 前面要循環(huán)items, 去掉active；item.active = !item.active }

（2）定義三個變量，分別是selected內存， selected顏色， selected屏幕，
然后@click="selectItem(index, k)"; 方法： selectItem(key, item) { if (key === '內存') { selected內存 = item;} else if...... }
修改:class="{active: (index === '內存' && k === selected內存) || (index === '顏色' && k === selected顏色) || ....}"

做好用第一種方法

2018年8月7日 05:08