Vue.component('address-component', {
template: '#address',
props: ['data', 'index'],
data() {
return {
item: {
address: this.data.address,
city: this.data.city,
state: this.data.state
}
}
},
methods: {
inputOccurred() {
this.$emit('on-change', this.item, this.index)
}
}
});
//
var vm = new Vue({
el: '#app',
data() {
return {
addresses: [{
address: '1 Stackoverflow Way',
city: 'San Fran',
state: 'California'
},
{
address: '2 Stackoverflow Way',
city: 'San Fran',
state: 'California'
}
]
}
},
methods: {
setAddress(value, index) {
this.$set(this.addresses, index, value);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>
<div id="app">
<h1>My Contact Form</h1>
<address-component
v-for="(address, index) in addresses"
:data="address"
:index="index"
:key="index"
@on-change="setAddress"
></address-component>
<pre>{{ addresses }}</pre>
</div>
<template id="address">
<div>
<h4>Address</h4>
<label>Address</label>
<input type="text" v-model="item.address" @input="inputOccurred"/>
<label>City</label>
<input type="text" v-model="item.city" @input="inputOccurred"/>
<label>State</label>
<input type="text" v-model="item.state" @input="inputOccurred"/>
</div>
</template>
