https://kojirooooocks.hatenablog.com/entry/2020/06/03/030405

はじめに

こんにちは。

前回の続きです。

kojirooooocks.hatenablog.com

次は emitあたりを振り返ります。

本題

CardList.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-title.sync="card.title"
    />
  </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 shadow">
    <input v-model="computedCardTitle" class="w-full p-3" />
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    cardTitle: {
      type: String,
      require: true,
      default: ''
    }
  },
  computed: {
    computedCardTitle: {
      get() {
        return this.cardTitle
      },
      set(value) {
        this.$emit('update:cardTitle', value)
      }
    }
  }
}
</script>

<style scoped></style>

孫コンポーネントまである今回の構成では、 .sync を2回使って連鎖する感じではなく、こちらの記事を参考に、computedを使ってemitを行いました。

gyazo.com

終わりに

大体出来上がってきました。

次はvee-validateでフォームのバリデーションとかをやってみます。

あんまnuxt関係ないよね...w