Vue + TypeScript ToDo Demo

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

基本的 ToDo Demo 项目

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

  

    
我的待办事项:
    
    创建 
    
{{error}}
    

      

        ✓
        ☐
        {{todo.content}}
      
    
  
  

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 = []
  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指令。

        ✓
☐