久々にnuxt入門した #02

はじめに

こんにちは。

前回の記事の続きです。

kojirooooocks.hatenablog.com

次はテンプレートのコンポーネント分けをします。

本題

index.vue

apiでデータを取ってきた的なのりで、dataをつかってみます。 そして、そのデータからカード表示します。

<template>
  <div class="bg-blue-100">
    <h1 class="text-2xl">Todo List</h1>

    <div class="flex">
      <CardList title="todo" :card-list="cardList.todo" />
      <CardList title="doing" :card-list="cardList.doing" />
      <CardList title="done" :card-list="cardList.done" />
    </div>
  </div>
</template>

<script>
import CardList from '../components/CardList'
export default {
  components: { CardList },
  data() {
    return {
      cardList: {
        todo: [
          { id: 1, title: 'aaa', body: 'AAA' },
          { id: 2, title: 'bbb', body: 'BBB' },
          { id: 3, title: 'ccc', body: 'CCC' },
          { id: 4, title: 'ddd', body: 'DDD' },
          { id: 5, title: 'eee', body: 'EEE' },
          { id: 6, title: 'fff', body: 'FFF' }
        ],
        doing: [{ id: 10, title: '○○○○○', body: '◎◎◎◎◎◎◎' }],
        done: [
          { id: 100, title: '000', body: '0000000000' },
          { id: 200, title: '111', body: '1111111111' },
          { id: 300, title: '222', body: '2222222222' }
        ]
      }
    }
  }
}
</script>

<style></style>

CardLit.vue

<template>
  <div class="flex-1 bg-gray-100 m-2 cursor-pointer">
    <p class="text-xl">{{ title }}</p>
    <Card v-for="(card, k) in cardList" :key="k" :card="card" />
  </div>
</template>

<script>
import Card from './Card'
export default {
  name: 'CardList',
  components: { Card },
  props: {
    title: {
      type: String,
      require: true,
      default: ''
    },
    cardList: {
      type: Array,
      require: true,
      default: null
    }
  }
}
</script>

<style scoped></style>

Card.vue

<template>
  <div class="z-10 flex-auto bg-white m-2 p-3 shadow">
    <span>ID:{{ card.id }}&nbsp;{{ card.title }}</span>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    card: {
      type: Object,
      require: true,
      default: null
    }
  }
}
</script>

<style scoped></style>

こんな感じでできました。

終わりに

次はイベントとmodal表示とかまでやってみます。