Vue Todo_List 小實作新增功能與發現問題

在上一篇的Todo_List完成了，編輯和刪除還有新增的功能，這次準備新增篩選的功能，有全部事項、已完成事項、未完成事項。

但在新增這些事項時發現一些問題，然後順利解決了所以就紀錄一下😀

有3個篩選的功能，所以必須多3個選取按鈕。
這裡就不多說啦就3個radio button。

直接進入怎麼篩選的程式嗎吧!

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

將原本in items改成filtertext，將要把filtertext放入computed做處理。

<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">未完成

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

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;
          });
        }
      }
    },

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

而在做完篩選的時候發現一個問題，我們的remove是用index的方式去刪除物件，但當我們篩選完資料的index可能會有變動，這樣我們在刪除時會造成刪除到原先的index，造成刪錯的結果，所以我們必須改用uuid識別的方式去刪除，避免這個問題發生。

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="";
      }

在輸入按下enter時加入一個random的uuid進去，而這random值可自己訂，看是要加時間戳記或名字等等，這裡範例讓他1-1000吧但小心重複哦。

<button @click="remove(item.uuid)">刪除</button>

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

 remove(uuid){
        for(var i in this.items){
          if(this.items[i].uuid==uuid){
            this.items.splice(i,1);
          }
        }
      }

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