來!拋開input的radio!在Vue裡面寫個單選器!
阿新 • • 發佈:2018-12-26
import icon from "#/common/icon/icon"
export default {
components: {icon},
data() {
return {
//自己隨便捏造幾項吧!
cateInfos:[
{productTypeName: "測試1", productTypeID: 1, isON: false},
{productTypeName: "測試2" , productTypeID: 2, isON: false}
],
//控制按鈕的變數
inputIsOk: false,
//選擇的ID
selectId:0,
}
},
methods: {
select(index, id) {
//按鈕改變
this.inputIsOk = true ;
//記錄選中的值
this.selectId = id;
//單選效果
//cates是引用,改變cates就是改變cateInfos
let cates = this.cateInfos;
for (let i in cates) {
//注意i是個字串
if (parseInt(i) === index) {
//點亮
cates[i].isON = true;
} else {
//變灰
cates[i].isON = false;
}
}
console.log(JSON.stringify(cates));
},
cateOK(){
if(this.inputIsOk){
//點選事件
console.log('ok');
}
//否則就是點不動,相當於disabled
}
}
}