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

はじめに

こんばんは。

今回も前回の続きです。

kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com

今回は、修正にバリデーションを入れるのと、カードの削除機能を追加しました。

本題

CardDetailModal.vue

モーダルコンポーネントに ValidationObserver と ValidationProvider を追加して、さらに、削除ボタンを追加しました。

<template>
  <div class="m-8">
    <h2 class="text-3xl">{{ cardData.title }}の修正</h2>
    <div class="mt-5">
      <ValidationObserver ref="obs" v-slot="{ reset, valid }">
        <ValidationProvider v-slot="{ errors }" rules="required|max:10">
          <div>
            <p class="my-1 text-lg">タイトル</p>
            <input
              v-model="title"
              class="w-full p-3 border-2"
              @focus="$event.target.select()"
            />
            <span v-for="(error, k) in errors" :key="k" class="text-red-500">
              {{ error }}
            </span>
          </div>

          <div class="mt-10">
            <p class="my-1 text-lg">本文</p>
            <textarea
              v-model="body"
              class="w-full p-3 border-2"
              rows="6"
              @focus="$event.target.select()"
            ></textarea>
          </div>

          <div class="mt-5 text-right">
            <button
              class="bg-blue-400 text-white font-bold py-2 px-4 rounded"
              :class="{
                'hover:bg-blue-700': valid,
                'bg-blue-500': valid,
                'cursor-not-allowed': !valid
              }"
              :disabled="!valid"
              @click="
                $emit('onModifyCard', cardKey, title, body, cardData.status)
              "
            >
              更新する
            </button>
            <button
              class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
              @click="$emit('onDeleteCard', cardKey, cardData.status)"
            >
              削除する
            </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="$emit('close')"
            >
              閉じる
            </button>
          </div>
        </ValidationProvider>
      </ValidationObserver>
    </div>
  </div>
</template>

<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate'
export default {
  name: 'CardDetailModal',
  components: {
    ValidationObserver,
    ValidationProvider
  },
  props: {
    cardKey: {
      type: Number,
      require: true,
      default: 0
    },
    cardData: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      body: this.cardData.body,
      title: this.cardData.title
    }
  }
}
</script>

<style scoped></style>

CardList.vue

modalに削除用のイベントを渡しました。

<template>
...
    <modals-container
      @onModifyCard="onModifyCard"
      @onDeleteCard="onDeleteCard"
    />
...
</template>

methods: {
...
    onDeleteCard(cardKey, cardStatus) {
      this.$emit('doDeleteCard', cardStatus, cardKey)
      this.$modal.hideAll()
    }
...
}

index.vue

削除用イベントをわたしています。

また、実際の削除用メソッドを追加しています。

<template>
...
      <CardList
        type="todo"
        :card-list="cardList.todo"
        @doAddCard="doAddCard"
        @doDeleteCard="doDeleteCard"
        @doModifyCard="doModifyCard"
      />
...
</template>


methods: {
...
    doDeleteCard(type, key) {
      this.cardList[type].splice(key, 1)
    }
...
}