複習 Vue.js - todolist

為了用 Vue.js 挑戰地下城 3F，
又回去複習了一下 Vue.js，
再次感謝洧杰老師的 Vue.js 教學QAQ
Youtube 影音連結：Vue.js 教學 - 幼幼班入門篇 (上)
然後在寫 todolist小作業時遇到問題QQ
殊不知中間卡關的地方還是被一年前的自己所寫的code所救orz
為了不要讓再一年後的我或其他人遇到一樣問題不知所措，
決定寫 blog 記錄一下~

[前言]

todolist要求：

1. 新增 todo 
2. 刪除 todo 
3. 完成 todo
4. 多一顆按鈕：全部做完
5. 顯示條件：全部顯示、已處理、未處理

我這次有卡關的地方在 3 跟 5。


[完成 todo]

目標是要勾選該項目後，也將該項目的狀態改成已完成。

我原本想說很單純，
就是那一項任務的 checkbox 被點擊時判斷任務狀態(taskStatus)，
未完成(false)就改成已完成(true)，
已完成(true)就改成未完成(false)。

<input type="checkbox" :checked="task.taskStatus" v-on:click="completeTask(task)">

completeTask: function(task){
  if (this.taskList[indexNum].taskStatus == false){
    this.taskList[indexNum].taskStatus = true;
  } else{
    this.taskList[indexNum].taskStatus = false;
  }
}
</pre>

但不知道為什麼，
只要 taskStatus 被改為 true，taskStatus 就再也無法變成 false。
試很久，決定去看一年前的我怎麼寫的。

結果我只這樣寫就好了orz

completeTask: function(task){
   let indexNum = this.taskList.indexOf(task);
   this.taskList[indexNum].taskStatus = event.target.checked;
},

就是只要該項目被點擊 taskStatus 就設為該項目的 checked 值。
( checked 是 checkbox有無被勾選的值：true / false )

可以理解但我不曉得我原本那樣為什麼不行orz

哦對了，html的屬性值設定如果要隨著資料變化而變化的話要這樣寫：
:checked = ""
這意思是 checkbox checked 的值為該項目的 taskStatus ~

<input type="checkbox" :checked="task.taskStatus" v-on:click="completeTask(task)">

以此類推，要改class的值就是 :class ="" 囉。

像我想要針對已完成的項目樣式做變化，
還要能夠判斷條件的話，
在 html 這樣寫：:class="classChage(task.taskStatus)" (呼叫 classChage 函數)
Vue.js 定義checkboxBtn  這樣寫：

   classChage: function(taskStatus){
            if ( taskStatus == true ){
                return "finishedTask";
            }
        }

以上是說如果 taskStatus 是 true，
就回傳 "finishedTask" 到 html。
所以在html就會變這樣：

<li class="finishedTask">

[顯示條件：全部顯示、已處理、未處理]

這邊卡很久是因為我不知道要怎麼只顯示特定條件的資料出來，
想想用 v-if 不就好了嗎!!!
但只會 v-if="task.taskStatus==true" 這樣的用法，
可是這邊是要根據點選的條件要顯示符合條件的資料，
所以我就卡關了orz

再次去看一年前的我寫的 code，
原來這邊一樣可以呼叫函數，搭配 return 的用法
html：

<li v-for="task in taskList" v-if="modeCheck(showMode,task)" :class="classChage(task.taskStatus)">

Vue.js：

modeCheck: function(showMode,task){
 switch (showMode) {
  case 'ALL':
   return true;
   break;              
  case 'COMP': 
   return task.taskStatus; // 如果showMode是COMP表示只有要看已完成的 // v-if就要給條件是 task.taskStatus
   break; 
case 'UNDO': 
   return !task.taskStatus; // 如果showMode是UNDO表示只有要看未完成的 // v-if就要給條件是 !task.taskStatus
   break;
  default:
   return true;
   break;
   }
},

這個寫法真的要好好記下來，不然真的會忘記orz


[額外：Font Awesome]

因為很久沒用了，所以也趁這次的機會小小複習一下~
在 html 的 head 加這行：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

然後到 fontawesome 找到想加的圖案， 在想加的地方加入 html 標籤。(照 fontawesome 上貼上即可) Font Awesome

<i class="fas fa-check"></i>全部標為已完成

[額外：CSS]

標示已完成想要讓它慢慢變化，
還有刪除線，
要這樣訂：

text-decoration: line-through;
opacity: 0.3;
transition: all 0.8s;

[程式碼]

Vue.js 幼幼班起手式(上) - todolist 作業 (2020版)

See the Pen Vue.js 幼幼班起手式(上) - todolist 作業 (2020版) by Ado Lin (@misado) on CodePen.

todolist作業繳交(Vue.js) (2019版)


哦對了因為我重點著重在複習 Vue.js ，
所以我就沒有寫 localStorage 了，
localStorage 的寫法可參考 2019版~