【Vue.js】子コンポーネントinput、親コンポーネントbutton
Q&A
Closed
解決したいこと
Vue.jsでinput要素をまとめた子コンポーネントを用意。
呼び出し元の親コンポーネントにあるbuttonを使って、formでpost送信したい。
前提
・フロントエンドをVue.js v2.6.10
・バックエンドをlaravelで構築しているアプリケーションを運用
・バックエンドは改修しない、vue.js側で解決する
・コンポーネントの構成も変えない（子の中にボタンを作るのは無し）
発生している問題・エラー
input要素を1つずつコンポーネント化し、$emitとpropsでやりとりする例はあるが、
下記のような構成で親子間でのデータのやりとりを上手く構築する方法が思いつかない。
親コンポーネント
<template>
<div>
<child></child>
</div>
<div>
<button>変更を保存</button>
</div>
</template>
（略）
子コンポーネント
Child.vue
（略）
<v-input :value="name" name="name" />
<v-input :value="addr1" name="addr1" />
<v-input :value="addr2" name="addr2" />
<v-input :value="zip" type="hidden" name="zip" />
（略）
自分で試したこと
親コンポーネント
<template>
<div>
<child
v-model:name="name"
v-model:addr1="addr1"
v-model:addr2="addr2"
v-model:zip="zip"
></child>
</div>
<div>
<form action="/edit" method="post">
<input :value="name" type="hidden" name="name">
<input :value="addr1" type="hidden" name="addr1">
<input :value="addr2" type="hidden" name="addr2">
<input :value="zip" type="hidden" name="zip">
<button @submit="submit">変更を保存</button>
</form>
</div>
</template>
（略）
子コンポーネント
Child.vue
（略）
<v-input :value="name" @input="$emit('update:name', $event.target.value) name="name" />
<v-input :value="addr1" @input="$emit('update:addr1', $event.target.value) name="addr1" />
<v-input :value="addr2" @input="$emit('update:addr2', $event.target.value) name="addr2" />
<v-input :value="zip" @input="$emit('update:zip', $event.target.value) type="hidden" name="zip" />
（略）
props: {
name: String,
addr1: String,
addr2: String,
zip: String,
},
なんか違うような気がする。子の方にボタンがあれば、話は早いのだが。
0
