Vueでコンポーネントを作ってみた件

さて前回まででヘッダーの作成が完了しました。
次はコンテンツ部分です。まずはTodo.vue、Task.vueの二つに共通するソート機能のボタン部分と、リストのタイトル部分をを作っていきます。

共通パーツをコンポーネント化する

Todo.vue、Task.vue共通のソート機能をヘッダー下部に作っていきます。
App.vueに直接書き込んでも良いのですが、この先違う画面の開発でソート機能のない画面を作成するときに都合が悪くなる可能性があります。
ですのでコンポーネントを作り両方で呼び出すことで制作の効率化を測ります。
まずはcomponentsフォルダにListHeader.vueファイルを新規で作成します。
CSSは割愛します。

<template>
  <div class=”listHeader”>
    <div class=”sort”>
      <ul class=”sort_in”>
        <li class=”sort_in_wrap”>
          <label class=”sort_in_wrap_item”>
            <input type=”radio” name=”sortBtn”>
            <span>すべて</span>
          </label>
        </li>
        <li class=”sort_in_wrap”>
          <label class=”sort_in_wrap_item”>
            <input type=”radio” name=”sortBtn”>
            <span>作業中</span>
          </label>
        </li>
        <li class=”sort_in_wrap”>
          <label class=”sort_in_wrap_item”>
            <input type=”radio” name=”sortBtn”>
            <span>完了</span>
          </label>
        </li>
      </ul>
    </div>
    <div class=”listTitle”>
      <ul class=”listTitle_in”>
        <li class=”listTitle_in_wrap -id”>ID</li>
        <li class=”listTitle_in_wrap -des”>内容</li>
        <li class=”listTitle_in_wrap -state” :class=”{‘-task’ : pageState === ‘/task’}”>状態</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: ‘listHeader’,
  computed: {
    pageState: function () {
      return this.$route.fullPath
    }
  }
}
</script>

Todo.vueとTask.vueでレイアウトが若干違うのでナビゲーションの時と同じようにVue Routerの値を使いクラスの出し分けをしています。完成したcomponentを呼び出してみましょう。

Compoentの呼び出し

Todo.vueとTask.vueでそれぞれ呼び出します。importを使いファイルを呼び出し、Componentsプロパティに登録します。最後にカスタムタグを書いて終了です。

// Todo.vue
<template>
  <div class=”todo”>
    <list-header/>
    TODO LIST
  </div>
</template>
<script>
import ListHeader from ‘@/components/ListHeader.vue’
export default {
  name: ‘todo’,
  components: {
    ListHeader  
}
}
</script>

これで無事に呼び出しが完了しました。

次はリストを作っていきます。