Vue CLIによるtodolistのアップデート処理

2 min read読了の目安（約2400字）
HTML5
JavaScript
vuejs
#
vuecli
tech

概要

現在Vue CLIとNode.js(Express)によるアプリ開発をしている。まずは手を慣らすことを目的に、CRUD処理をtodolistを用いて実装している。バックエンドAPIは、Expressにより開発済み。ExpressとVue CLIの連携処理を行っているところで、今回はupdate処理について纏める。あくまで個人的な備忘録として記録を残すのみなので、もし記載内容について詳しく知りたい方がいれば、コメントを残して欲しい。

todolists

まずvue cliのdata()にtodolistsを持つ。todolistsは、mountedのタイミングでバックエンドのExpressからtodolist項目を取得し、todolistsへ格納する。なぜmountedのタイミングかというと、elementへのマウントが実行された後にmounted処理が行われるからだ。説明したコードは以下のイメージ。Vue CLIのライフサイクルフックについては、以下の記事を参考にして欲しい。
参照：https://qiita.com/chan_kaku/items/7f3233053b0e209ef355

  data() {
    return {
      todolists: null,
      …省略…
    }
  },
  mounted() {
    this.axios.get("http://localhost:3000/todolist").then(res => (
      this.todolists = res["data"]
    ))
  },

そうすると、下記のtbodyタグ内でリスト表示ができる。todolistsには、name / id / due_date / category / detailが格納されている。todolist.idという形でリスト表示が可能である。

      <tbody>
        <tr v-for="(todolist, index) in todolists" :key="index">
          <td>{{todolist.id}}</td>
          <td v-if="!isEditName" v-on:dblclick="isEditName=true">{{todolist.name}}</td>
          <td v-else><input v-model="todolist.name" type="text" v-on:blur="updateName(todolist.id, todolist.name)"></td>
          <td>{{todolist.due_date}}</td>
          <td>{{todolist.category}}</td>
          <td>{{todolist.detail}}</td>
        </tr>

更新作業

HTML要素の説明

まず説明したいのは、下記の２行。

  • dataに格納されたisEditNameはデフォルト設定においてfalseとなっている。つまりtdタグの上側で、単純にtodolist.nameが表示されているのみ。しかしこちらの項目をダブルクリックすると、isEditNameがtrueとなる。
  • isEditNameがtrueの場合、inputタグへと表示が切り替わる。v-on:blurとは、フォーム要素などでフォーカスが外れたタイミングで処理が実行される。
  • つまりフォームをクリックし、編集等を行なった後に別の場所へマウスが移動したことを検知したら、updateName関数が実行されるのである。
          <td v-if="!isEditName" v-on:dblclick="isEditName=true">{{todolist.name}}</td>
          <td v-else><input v-model="todolist.name" type="text" v-on:blur="updateName(todolist.id, todolist.name)"></td>

JavaScriptの説明

ではupdateName関数において、どのような処理がされるのか。updateName関数には、todolist.idとtodolist.nameが引数として渡される。

  • 更新するnameは、expressで管理されたバックエンドAPIの適切なidへ格納する必要がある。そのため、引数として渡されたidリンクへ{ id:id, name:name }という形で渡される。
  • 少しわかりにくいが、引数のnameはname:nameの二つ目のnameと対応している。例えば引数としてname2と渡して、name:name2とかきかえてもいい。
  • 最後にthis.isEditName=falseとすることで、inputタグから通常のtd表示タグへと切り替わる。
    updateName(id, name) {
      this.axios.put("http://localhost:3000/todolist/" + id, { id:id, name:name }).then(res => {
        this.isEditName = false;
        console.log(res);
      }).catch(err => {
        console.log(err);
      });
    }