Vue-todolist小實做2

發表於 | 分類於 ， ，

在上一篇的Todo_List完成了，編輯和刪除還有新增的功能，這次準備新增篩選的功能，有全部事項、已完成事項、未完成事項。
但在新增這些事項時發現一些問題，然後順利解決了所以就紀錄一下。

增加篩選功能

增加全部事項、已完成事項、未完成事項。
所以我們需要3個radio button，並且具有篩選的功能，將原本items改成filtertext，把filtertext放入computed做篩選處理。

1
<li v-for="(item,index) in filtertext" :key="item.uuid" :class="{finished:item.isFinished}">

新增了3個radio button然後綁定checked這樣能獲取狀態。

1
2
3
<input :checked="showall" :class="{show:showall}" click="show1" name="show" type="radio">全部
<input :checked="showend" :class="{show:showend}" click="show2" name="show" type="radio">已完成
<input :checked="showing" :class="{show:showing}" click="show3" name="show" type="radio">未完成

computed的篩選運算，computed的方式只要有變更資料將會在重新運算一次的特性，寫3個判斷式來更改return出去的值。:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
computed:{
  filtertext(){
    if(this.showall==true){
      return this.items;
    }
   if(this.showend==true){
      return this.items.filter(function(item,index,array){
          return item.isFinished==true;
      });
    }
    if(this.showing==true){
      return this.items.filter(function(item,index,array){
        return item.isFinished==false;
      });
    }
  }
},

發生問題

在做完篩選的時候發現一個問題，我們的remove是用index的方式去刪除物件，但當我們篩選完資料的index可能會有變動，這樣我們在刪除時會造成刪除到原先的index，造成刪錯的結果，所以我們必須改用uuid識別的方式去刪除，避免這個問題發生。
所以我在每次新增資料時會加入一個random的uuid進去，而這random值可自己訂，看是要加時間戳記或名字等等，這裡範例讓他1-1000吧但小心重複哦。

1
2
3
4
5
6
7
8
9
Enter(){
    function getRandom(x){
      return Math.floor(Math.random()*x)+1;
    };
    var id = getRandom(1000);
    this.items.push({label:this.newlist,isFinished:false,isEdit:false,uuid:id});
    console.log(this.items);
    this.newlist="";
  }

將remove從原本index換成uuid進去。

1
<button @click="remove(item.uuid)">刪除</button>
remove(uuid){
    for(var i in this.items){
        if(this.items[i].uuid==uuid){
            this.items.splice(i,1);
        }
    }
}

透過for方式去查訪每個object，並將符合條件的做刪去，這就能去除掉這個問題啦~~
github程式碼在這裡