javascript - vuejs中實現列表單選(樣式改變)

問題描述

初始選中第一個

但現在選中另一個其他被選中的不取消選中樣式

代碼如下

請問是哪里出了問題，我的理解是改變了clickindex后界面重新渲染，然后其它cell的index和clickindex不等則會賦予正常的樣式，但好像并不是這樣

問題解答

這個 clickindex 和 this.index 都是在列表項的組件上的吧？所以導致的問題。

應該把clickindex保存在列表那個組件上，然后通過props傳進列表項中。而點擊事件則應冒泡到列表組件中，然后讓列表組件修改clickindex。

vue 是用數據驅動試圖的 methods: {

incrementTotal: function (a) { for(let i=0;i<this.list.length;i++){ if(i==(a-1)){ this.list[i].Active=true }else { this.list[i].Active=false } } } 這事我寫的方法