久々にnuxt入門した #04 - もがき系プログラマの日常

はじめに

こんばんは。

今回も前回の続きです。

kojirooooocks.hatenablog.com

今回は、モーダル表示の前に、カードの追加を実装しました。

本題

index.vue

追加する際のイベントを渡してます。

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

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

<script>
import CardList from '../components/CardList'
export default {
  components: { CardList },
  data() {
    return {
      cardList: {
        todo: [
          { title: 'aaa', body: 'AAA' },
          { title: 'bbb', body: 'BBB' },
          { title: 'ccc', body: 'CCC' },
          { title: 'ddd', body: 'DDD' },
          { title: 'eee', body: 'EEE' },
          { title: 'fff', body: 'FFF' }
        ],
        doing: [{ title: '○○○○○', body: '◎◎◎◎◎◎◎' }],
        done: [
          { title: '000', body: '0000000000' },
          { title: '111', body: '1111111111' },
          { title: '222', body: '2222222222' }
        ]
      }
    }
  },
  methods: {
    doAddCard(type, title) {
      this.cardList[type].push({
        title,
        body: ''
      })
    }
  }
}
</script>

<style></style>

CardList.vue

AddCardコンポーネントを追加しました。

<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-title.sync="card.title"
    />
    <AddCard @onAddCard="onAddCard" />
  </div>
</template>

<script>
import Card from './Card'
import AddCard from './AddCard'
export default {
  name: 'CardList',
  components: { AddCard, Card },
  props: {
    title: {
      type: String,
      require: true,
      default: ''
    },
    cardList: {
      type: Array,
      require: true,
      default: null
    }
  },
  methods: {
    onAddCard(title) {
      const type = this.title
      this.$emit('doAddCard', type, title)
    }
  }
}
</script>

<style scoped></style>

AddCard.vue

トレロっぽくカードの最後に追加ボタンを用意して、ボタンを押すと入力フォーム & 追加、閉じるボタンを表示されるようにしました。

<template>
  <div class="px-2">
    <p @click="isPushedAddCardButton = true">＋ カードを追加</p>
    <div v-show="isPushedAddCardButton">
      <input v-model="addCardTitle" class="w-full p-3" />

      <div class="mt-2">
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          @click="onClickAddButton"
        >
          追加
        </button>
        <button
          class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
          @click="onClickCloseButton"
        >
          閉じる
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddCard',
  data() {
    return {
      addCardTitle: '',
      isPushedAddCardButton: false
    }
  },
  methods: {
    onClickAddButton() {
      this.$emit('onAddCard', this.addCardTitle)
      this.addCardTitle = ''
      this.isPushedAddCardButton = false
    },
    onClickCloseButton() {
      this.addCardTitle = ''
      this.isPushedAddCardButton = false
    }
  }
}
</script>

<style scoped></style>

gyazo.com

終わりに

だいたいトレロっぽくなってきました！

次こそは本当に編集モーダル作ります！