はじめに
こんにちは。
前回の続きです。
次は 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を行いました。
終わりに
大体出来上がってきました。
次はvee-validateでフォームのバリデーションとかをやってみます。
あんまnuxt関係ないよね...w