Todo List: Vue.js Example

利用 Vue.js 簡單實作一個 Todo List。

功能介紹

實作的功能有

Demo

Todo List: Vue.js Example

原始碼在這裡

環境設定

由於使用 gulp 轉換 less 為 css,因此若更改 less 檔案,要使用npm startgulp來觀看更新後的畫面。

程式碼說明

遇到的問題 / 解法

父子元件溝通時無法使用小駝峰 (camelCased) 命名自訂事件

父子元件溝通時,父層使用 props down 將資訊傳遞給子層,而子層透過 events up 的方式 (即$emit) 將結果傳回父層。父層 method 使用小駝峰命名是無法運作的,這是由於部份 template 使用 HTML DOM 的緣故。

解法

混合 JavaScript 物件和 Vue Instance 屬性一起操作

測試時發現刪不掉 todo,在加入新的 todo 後,完成、已完成和未完成的計數無法準確更新。看了好久才發現是因為混合 JavaScript 物件和 Vue Instance 屬性一起操作的關係 (如下圖 1程式碼),也就是說,Vue.js 無法偵測物件新增的屬性,新加入的屬性並無 Reactivity 特性 - 在初始化時並無設定Object.defineProperty和加入監聽。

混合 JavaScript 物件和 Vue Instance 屬性一起操作 圖 1

解法

使用Vue.set加入新屬性,刪除則要使用Vue.delete,確保之後的互動更新 (Reactivity)。

也就是,將圖 1 的程式碼改為圖 2 這樣…

混合 JavaScript 物件和 Vue Instance 屬性一起操作 圖 2

下圖 3 中,標示「1」的物件是使用Vue.set產生的,而標示「2」的物件則是 JavaScript 物件,debug 時可以注意一下。

混合 JavaScript 物件和 Vue Instance 屬性一起操作 圖 3

v-ifv-show皆可控制顯示與否,兩者差異是?


comments powered by Disqus