【Vue】Vue + TypeScript で 簡単な ToDo リストを作成

■ はじめに

簡単な ToDo リストの作成を通して、
Vue + TypeScript について学ぶ。

目次

【１】サンプル
【２】はまったポイント
　その１：バインドできない

【１】サンプル

todo.vue

<template>
  <div>
    <h1>Todo List</h1>
    <input type="text" placeholder="Input your ToDo!" @keyup.enter="onEnter">
    <div v-if="this.toDoList.length > 0">{{ this.toDoList.length }} 件を表示</div>
    <ul>
      <li v-for="(toDo, index) in this.toDoList" :key="toDo.title">
        {{ index }} - {{ toDo.title }}
      </li>
    </ul>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';

interface ToDo {
  title: string;
}

@Component
export default class Hello extends Vue {
  private toDoList: ToDo[] = new Array<ToDo>();

  public onEnter(event: Event): void {
    if (event.target instanceof HTMLInputElement) {
      const tagetValue = event.target.value;
      console.log(`onEnter ${tagetValue}`);
      this.toDoList.push({ title: tagetValue });
    }
  }
}
</script>

【２】はまったポイント

その１：バインドできない

* 以下だとバインドできなかった

バインドできなかった例

@Component
export default class Hello extends Vue {
  private toDoList!: ToDo[];

  public created() {
    this.toDoList = new Array<ToDo>();
  }

参考文献

https://qiita.com/Nossa/items/b2e38bea4bda87a1de12

関連記事

Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000