[Vue.js + Axios] ToDoList (下)

续前一篇的例子：

分段进行：

Vue 基本结构及使用到的属性：

var app = new Vue({
    el: "#app",,
    data(){    // 定义资料 
        
    },
    created(){ // 初始完成 Vue 建立後要执行...
    
    },
    methods:{ // 定义在Vue或页面中要使用的方法（function）
    
    },
    computed:{ // 进行计算的方法
    
    }
})

补充资料：

• computed vs methods

定义资料

• 定义初始资料

  data() {
      return {
          todos: [],
          visibilityList: [  // 3种检视清单（Tab)
              { name: "全部", value: "all" },
              { name: "进行中", value: "active" },
              { name: "已完成", value: "completed" }
              // name是页面显示文字,value是程序中操控的值 
          ],
          visibility: 'all',   // 当前检视中的清单Tab,预设为全部
          cacheTodo: {},  // 暂存的Todo 
          cacheTitle: '' //暂存的项目名称
      }
  }
  

读取指定的 API 载入初始资料

• 将 API 网址存成一变数

  var urlAPI = "https://eudora-hsj.github.io/Vue-practice/data/todolist.json"
  

  并且观察一下 JSON 档资料结构：

  {
      "data":
          [
              {
                  "id": "1",
                  "title": "买牛奶",
                  "completed": false
              },
              {
                  ...
              }
      ]
  }
  

• 在 methods 里定义读取资料的 function（Axios）

  methods:{ 
      getList(url) {
          axios
              .get(url)
              .then((res) => {
                  this.todos = res.data.data
              })
              .catch((err) => {
                  console.log(err)
              })
      },
  }
  

• 并且在 Vue 初始建立完成时执行 getList(url)

  this.getList(urlAPI)
  

可以新增（Ｃ）待办项

• 在对应的 DOM @dbclick / @keyup.enter 触发事件

  <button class="btn btn-primary" type="button" @click="addTodo">新增</button>
  

  <input class="form-control" type="text" 
         v-model="newTodo" @keyup.enter="addTodo"/>
  

• 定义的方法

  methods: {
      addTodo() {
          let newTodoStr = this.newTodo.trim()
          if (!newTodoStr) {
              return
          }
          this.newTodo = ""
          let submitData = {
              id: Math.floor(Date.now()),
              title: newTodoStr,
              completed: false
          }
          this.todos.push(submitData)
      }
  }
  

可以编辑（Ｕ）目前的待办项

• 在对应的 DOM @dbclick 触发事件

  <li class="list-group-item" :key="item.id" @dblclick="editTodo(item)">
      (略)
  </li>
  

• 定义的方法

  methods: {
      editTodo(item) {
          this.cacheTodo = item
          this.cacheTitle = item.title
      }
  }
  

可以删除（Ｄ）待办项

• 在对应的 DOM @click 触发事件

  <button class="close" type="button" @click="removeTodo(item)">
  </button>
  

• 定义的方法
  删除该项，并以 index 与 item 的 id 对应

  methods: {
      removeTodo(item) {
          this.todos.splice(this.getIndex(item.id), 1)
      }
  }
  

可以一次删除所有待办项

• 在对应的 DOM @click 触发事件

  <a href="#" @click="cleanTodo">清除所有任务</a>
  

• 定义的方法
  filter 筛选出 completed 为 false 的资料并回传笔数

  methods: {
      cleanTodo() {
          this.todos.splice(0, this.todos.length)
          }
      }
  }
  

补充资料:

• JS-splice() | MDN

页签(Tab)依完成状态分类清单：全部 / 进行中 / 已完成

• Tab 页签内容抓取自 data 里的 visibilityList

• @click，visibility　等於该 Tab 的 Value　（all / active / completed　）

• 并且写有当前Tab样式的 active　要维持在 visibility 对应的 Tab

  <template v-for="(item, index) in visibilityList">
      <li class="nav-item" :key="index">
          <a class="nav-link" href="#" 
            :class="{'active' : visibility == item.value }"
            @click="visibility=item.value">
                {{item.name}}
          </a>
    </li>
  </template>
  

• 清单项目抓取自 filteredTodos 的结果（筛选出当前 Tab 的项目）

    <template v-for="(item) in filteredTodos">
      <li class="list-group-item">
       （略）
      </li>
    </template>
  

• 计算的方法
  根据当前的 visibility 回传对应状态的项目

  computed: {
      filteredTodos() {
          let nowTab = this.visibility
          switch (nowTab) {
              case "all":
                  return this.todos.filter((item) => true)
              case "active":
                  return this.todos.filter((item) => !item.completed)
              case "completed":
                  return this.todos.filter((item) => item.completed)
          }
      },
  }
  

计数目前未完成的项，且有变动时即时更新计数

• 在对应的 DOM 绑定显示资料

  <div>{{`还有 ${activeTodosLength} 笔任务未完成`}}</div>
  

• 计算的方法
  filter 筛选出 completed 为 false 的资料并回传笔数

  computed: {
      activeTodosLength() {
          return this.todos.filter((item) =>            
              !item.completed).length
          }
      }
  }
  

参考资料：

• Axios

个人 Blog: https://eudora.cc/