这里要做的是实现一个 List-Detail 的页面模式。即在右边显示 Todo 的详情。
页面结构主要修改即增加一个 todo-item-detail 列。

1. 增加 TodoItemDetail.vue

<template>
 <div>
     <h3>{{todo.content}} </h3>
     <div>
         <p><span class="info-label">创建时间:</span> <span class="todo-detail-item">{{todo.created}}</span></p>
         <p v-if="todo.done"><span class="info-label">完成时间:</span> <span class="todo-detail-item">{{todo.finishTime}}</span></p>
     </div>
     <div> 
         <textarea v-model="todo.note" placeholder="备注"></textarea>
     </div>
 </div> 
</template>

<script lang="ts">
import Vue from 'vue'
import Component from "vue-class-component"
import { Prop } from "vue-property-decorator"
import Todo from "./Todo"

@Component
export default class TodoItemDetail extends Vue {
    @Prop() todo: Todo
}
</script>

2. 修改 html

      <div class="todo-detail-column column">
        <todo-item-detail ref="todoItemDetail" ></todo-item-detail>
      </div>

3. 实现双击显示详情:

      <todo-item v-for="(todo,index) in todos" :todo="todo" :key="todo.content"
      @deleteTodo="deleteTodo(index)"
      @dblclick.native="showDetail(todo)"
      > </todo-item>

  showDetail(todo:Todo):void{
    for(let it of this.todos){
      it.uiActive = false
    }
    todo.uiActive = true
    this.$refs.todoItemDetail.todo = todo
  }

4. TodoItem 响应 todo.uiActive 变化 。
   在 TodoItem.vue中 li 元素添加 v-bind:class 属性绑定。

<li class="todo-list-item" v-bind:class="{ active: todo.uiActive }">

同时设置一下样式。

    .todo-list-item{ list-style: none;} 
    .todo-list-item.active{ background: #d1e1f1} 

完整代码见 feat 添加 TodoItemDetail.vue 组件