套用版型及建立代辦事項列表資料/ 製作頁籤分類功能/ 雙擊修改資料內容/ 刪除項目
以下筆記出自六角學院課程，詳情請參➤ 六角學院-Vue 出一個電商網站
▶︎ 套用版型及建立代辦事項列表的資料
- 先於事項輸入框的input建立v-model創建雙向數據綁定。（
<input>、<textarea>、<select>） - 並且建立資料結構（先用假資料模擬）
- 將假資料對應的位置佈局到html上
- li → v-for=”item of taskList” 跑每一筆資料
- id → input, label中的id用:item.id (v-bind修改屬性)
- title →<label>{{label.title}}</label>：顯示標題
- completed → 有checkbox的input加入v-model
data: { newTask: '', //使用者新輸入的事項 taskList: [ //存取每一筆事項的空陣列 {id: 0800, //每筆資料都要有一個對應id以便進行選取 title: '去看電影', completed: false //完成狀態，false未完成，true完成}],
4. 送出鈕&輸入框加入監聽@click=”addTask”, @keyup.enter=”addTask”
addTask: function () { var value = this.newTask.trim();//刪除字串兩端多餘空白 var timeStamp = Math.floor(Date.now()) //抓取時間命名idif (!value) {return} //若沒有value就結束，避免使用者輸入空白資料this.taskList.push({ id: timeStamp, title: value, completed: false }) // 將id, title, completed加入陣列this.newTask = ‘’//清空輸入欄}
▶︎ 製作頁籤分類的功能
- 樣式變更：運用增加class=”completed” 於checkbox表示已完成的項目，並設定條件為item.completed（也就是completed要為true，被勾選即劃掉）
<label class=”form-check-label” :id=”item.id” :class=”{‘completed’:item.completed}”>{{item.title}}</label>
2. 切換頁面：
新增visibility為頁籤狀態進行分類
var app = new Vue({
el: ‘#app’,
data: {
newTask: ‘’,
taskList: [],
visibility: ‘all’} //在此all是預設值，指全部的頁面設定每個頁面tab標籤頁被點擊時，會切換visibility的狀態，即：全部(all) /進行中(active) /已完成（finished），而class是否會增加active標籤則視visibility的狀態而定。
<li class=”nav-item”>
<a class=”nav-link” :class=”{‘active’:visibility==’all’}” @click=”visibility=’all’” href=”#”>全部</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#” :class=”{‘active’:visibility==’active’}” @click=”visibility=’active’”>進行中</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#” :class=”{‘active’:visibility==’finished’}” @click=”visibility=’finished’”>已完成</a>
</li>
3. 過濾分類資料：
使用computed回傳呈現畫面資料（因為不會進行修改），並修改 v-for的陣列對象
<li class=”list-group-item” v-for=”(item,key) in filteredtask”>
//此處修改為in filteredtaskcomputed: {// 全部資料
filteredtask: function () {
if (this.visibility == ‘all’) {
return this.taskList;}// 進行中資料
else if (this.visibility == ‘active’) {
var activeTask = [];
this.taskList.forEach(function (item) {
if (!item.completed) {
activeTask.push(item);}})
return activeTask;}// 已完成資料
else if (this.visibility == ‘finished’) {
var finishedTask = [];
this.taskList.forEach(function (item) {
if (item.completed) {
finishedTask.push(item);}})
return finishedTask;}}}
▲ filteredtask內部使用forEach搭配條件式構成新的activeTask與finishedTask陣列，而map是會回傳陣列迴圈中的每次資料，並回傳新陣列，但使用判斷式時，就會缺少部分資訊。（例如：[undefined, {已完成}, {已完成}]）
▶︎ 雙擊修改資料內容
- 建立雙擊事件 @dblclick=”editTask(item)”，並新增暫存編輯陣列與標題
data: {
newTask: ‘’,
taskList: [],
visibility: ‘all’,
cacheTask: {}, //暫存task
cacheTitle: ‘’}利用v-if判別要渲染待辦事項列or編輯框列
<li class=”list-group-item” v-for=”(item,key) in filteredtask” @dblclick=”editTask(item)”>//待辦事項列
<div class=”form-check” v-if=”item.id!==cacheTask.id”>
</div>//編輯框列
<input type=”text” class=”form-control” v-if=”item.id===cacheTask.id” v-model=”cacheTitle” @keyup.esc=”cancelEdit()” @keyup.enter=”doneEdit(item)”></li>
_____//雙擊編輯滿足
editTask: function (item) {
this.cacheTask = item; //cacheTask.id===item.id，切換成編輯
this.cacheTitle = item.title;}, //一次只會呈現一筆資料內容//執行取消編輯
cancelEdit: function (item) {
this.cacheTask = {}; //清空，滿足了cacheTask.id!==item.id，切換待辦//編輯完成時
doneEdit: function (item) {
item.title = this.cacheTitle; //待辦事項標題=編輯好的暫存事項標題
this.cacheTitle = ‘’;
this.cacheTask = {}}//清空，此時滿足cacheTask.id!==item.id，切換待辦
▶︎ 刪除項目
單純利用this.taskList.splice(key, 1)會產生點選別的分頁順序跑掉刪錯資料的問題，因此利用找相同id位置的方式刪除。
//法1：從taskList抓出和task.id一樣的item.id的位置，並進行刪除
removeTask: function (task) {//task為點選要刪除的資料
var newIndex = ‘’;
this.taskList.forEach(function (item, key) {
if (item.id === task.id) {newIndex = key;}})
this.taskList.splice(newIndex, 1)},//法2：同上
removeTask: function (task) {
var newIndex=this.taskList.findIndex(function(item,key){
return task.id===item.id;})
this.taskList.splice(newIndex, 1)}//法3：把所有id抓成一個陣列，並找出和task.id相同的id位置，並進行刪除
removeTask: function (task) {
var ids=this.taskList.map(function(cur){
return cur.id})
var newIndex=ids.indexOf(task.id);
this.taskList.splice(newIndex, 1)
