Vue + TypeScript ToDo Demo

在前面 Vue + TypeScript 简单项目的基础上，将项目改成一个 ToDo Demo 项目。

基本的 ToDo Demo 项目

index.html body 部分修改后如下：

  <div id="app">
    <h1>我的待办事项:</h1>
    <input v-model="newTodoText" @keyup.enter="create"  @input="clearError" placeholder="请输入待办事项">
    <button @click="create" >创建</button> 
    <p v-if="error" class="error">{{error}}</p>
    <ul>
      <li v-for="todo in todos">
        <span v-if="todo.done" class="done-marker" @click="todo.markDone">✓</span>
        <span v-else class="todo-marker" @click="todo.markTodo">☐</span>
        <span class="content">{{todo.content}}</span>
      </li>
    </ul>
  </div>
  <script src="app.bundle.js"> </script>

app.ts 修改后如下：

import Vue from "vue"
import Component from "vue-class-component"

class Todo{
  content: string
  created: Date
  done = false 

  constructor(content:string){
    this.content = content
    this.created = new Date()
  }

  markDone():void{
    this.done = true
  }

  markTodo():void{
    this.done = false
  }
}

@Component
class App extends Vue{
  newTodoText = ''
  todos :Array<Todo> = []
  hideCompletedTodos = false
  visitCount = 0
  error:any = null

  create():void{
    const content = this.newTodoText.trim()
    if(content.length  < 1){
      this.error = "待办事项不能为空"
      return
    }
    const todo = new Todo(content)
    this.todos.push(todo)
    this.newTodoText = ""
  }

  clearError():void{
    this.error = null
  }
}

const app = new App({ el: '#app', })

一个简单的 MVC 项目已经基本成型了。
然后上面的代码有一个 bug
@click="todo.markDone" 会导致调用 markDone 方法时，this 为 null

修正办法就是将markDone 等方法移到到 App 类中，然后传入 todo 对象

  markDone(todo:Todo):void{
    todo.done = true
  }

  markTodo(todo:Todo):void{
    todo.done = false
  }

之前这里的方法调用也有一处逻辑错误，一并修改，并修改为使用 v-show指令。

        <span v-show="todo.done" class="done-marker" @click="markTodo(todo)">✓</span>
<span v-show="!todo.done" class="todo-marker" @click="markDone(todo)">☐</span>