今回は Vue.js によるレンダリングで、もう少しアプリっぽい画面にしていきます。

この記事で分かること
・Vue devtools の導入
・Vue によるレンダリング

Vue devtools の導入

前回の記事で、Vue.js のプロパティを使ってみましたが、その際に定義した data プロパティなどをブラウザ上から確認するツールがあります。

Vue.js devtools　Chromeウェブストア

これをChromeに追加すると、ブラウザの開発者ツールからプロパティを確認できるようになります。

今回は使っていませんが、ここからストアの状態なども参照できます。

Vue によるレンダリング

それでは前回の続きですが、前回のものには問題があります。
それはメモが1つ分しか記録できないことです。複数記録できるように、data プロパティの items を配列に変更し、template 内を、配列要素をレンダリングする v-for を使った形にします。

// memo.vue
<template>
  <div>
    <section>
      <div class="input-wrapper">
        <textarea
          cols="40" rows="5"
          placeholder="メモをとる"
          v-model="input"
        ></textarea>
      </div>
      <button type="button" v-on:click="add">記録する</button>
    </section>
    <section>
      <h5 class="list-title">メモ一覧</h5>
      <p
        class="list-item-wrapper"
        v-for="(item, i) in items"
        v-bind:key="i"
      >
        <span class="list-index">{{ i + 1 }}</span>
        {{ item }}
      </p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      items: []
    }
  },
  methods: {
    add() {
      if (!this.input) return
      this.items.push(this.input)
      this.input = ''
    }
  }
}
</script>

<style scoped>
/* 省略 */
</style>

配列内の要素だけを取り出す場合は、v-for=”item in items” で大丈夫ですが、インデックスも同時に扱うために、v-for=”(item, i) in items” としています。クラスはスタイルを適用するために付けています（前回までの画面が何となくさみしかったので、色を付けました！）

また、v-if/v-else を使うと条件に応じたレンダリングができます。
これを使って、メモがある場合はメモの内容を表示し、メモがない場合はメッセージを表示するようにします。

// memo.vue
<template>
  ... ...
      <button type="button" @click="add">記録する</button>
  ... ...
    <section>
      <h5 class="list-title">メモ一覧</h5>
      <template v-if="items.length">
        <p
          class="list-item-wrapper"
          v-for="(item, i) in items"
          :key="i"
        >
          <span class="list-index">{{ i + 1 }}</span>
          {{ item }}
        </p>
      </template>
      <template v-else>
        <p>記録されたメモはありません</p>
      </template>
    </section>
  ... ...

なお、v-bind: は : 、v-on: は @ の形で省略表記が可能なので、書き換えてあります。

アプリっぽくなりました！（つづく）