如何创建可重用的表单 Vue 组件 [英] How To Create a Reusable Form Vue Component
问题描述
假设我想创建一个联系表单.在此联系表单中，用户可以有多个地址.我认为这是使用 Vue 组件的绝佳机会，这样我就不必创建多余的地址表单字段.然后我就可以在网站的不同区域使用这个组件，比如编辑、创建等......
我将如何创建一个父级可以使用的表单组件并将该表单中的值添加到地址数组中?此外，如果正在编辑此表单，我希望能够使用现有值填充此表单.
我尝试了不同的东西，但我尝试过的似乎没有任何效果.有任何想法吗?我已经在 Stack 和 Google 上搜索过，但没有找到答案.
这是我正在尝试完成的一些起始代码(粗略示例).当然，我会允许用户在创建/编辑时动态添加多个地址，但我也会在编辑表单时循环遍历地址数据以显示每个地址组件，但这只是一个快速的非工作设置来理解我的观点
AddressComponent.vue
<div><h4>地址</h4><label>地址</label><input type="text" v-model="address"><label>城市</label><input type="text" v-model="city"><label>State</label><input type="text" v-model="state"></模板><脚本>导出默认{数据() {返回 {地址:空，城市:空，状态:空}}}
ContactForm.vue
<h1>我的联系表</h1><表格><AddressComponent></AddressComponent>//地址[0]<AddressComponent></AddressComponent>//地址[1]</表单></模板><脚本>从'../components/AddressComponent' 导入 AddressComponent导出默认{组件:{AddressComponent}，数据() {返回 {地址:[]，}}}也许像这样，传入数据，然后将更改发送回父级.
Vue.component('address-component', {模板:'#address'，道具:['数据'，'索引']，数据() {返回 {物品: {地址:this.data.address，城市:this.data.city，状态:this.data.state}}},方法: {输入发生(){this.$emit('on-change', this.item, this.index)}}});//var vm = new Vue({el: '#app',数据() {返回 {地址:[{地址:'1 Stackoverflow Way',城市:'旧金山'，州:'加利福尼亚'},{地址:'2 Stackoverflow Way',城市:'旧金山'，州:'加利福尼亚'}]}},方法: {设置地址(值，索引){this.$set(this.addresses, index, value);}}});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script><div id="应用程序"><h1>我的联系表</h1><地址组件v-for="(address, index) 在地址中":数据=地址":index="索引":key="索引"@on-change="setAddress"></address-component><pre>{{ 地址 }}</pre><模板 id="地址"><div><h4>地址</h4><label>地址</label><input type="text" v-model="item.address" @input="inputOccurred"/><label>城市</label><input type="text" v-model="item.city" @input="inputOccurred"/><label>State</label><input type="text" v-model="item.state" @input="inputOccurred"/>
</template>
Let's say I want to create a contact form. In this contact form, a user can have multiple addresses. I would think that this is a perfect opportunity to use a Vue Component so that I don't have to create redundant address form fields. I would then be able to use this component in different areas of a website, say on edit, create, etc....
How would I go about creating a form component that a parent can use and have values from that form get added to an addresses array? Also, I would like to be able to populate this form with existing values if it's being edited.
I've tried different things but nothing I've tried seems to work. Any ideas? I've searched Stack and Google but haven't been able to find an answer.
Here is some starting code of what I'm trying to accomplish (crude example). Of course, I would allow a user to dynamically add multiple addresses on creation/edit but I would also on edit of the form loop through the addresses data to display each address component but this is just a quick non-working setup to get my point across.
AddressComponent.vue
<template>
<div>
<h4>Address</h4>
<label>Address</label>
<input type="text" v-model="address">
<label>City</label>
<input type="text" v-model="city">
<label>State</label>
<input type="text" v-model="state">
</div>
</template>
<script>
export default {
data() {
return {
address: null,
city: null,
state: null
}
}
}
</script>
ContactForm.vue
<template>
<h1>My Contact Form</h1>
<form>
<AddressComponent></AddressComponent> // Addresses[0]
<AddressComponent></AddressComponent> // Addresses[1]
</form>
</template>
<script>
import AddressComponent from '../components/AddressComponent'
export default {
components: {AddressComponent},
data() {
return {
addresses: [],
}
}
}
</script>
Perhaps something like this, pass in the data and then emit the change back to the parent.
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>
这篇关于如何创建可重用的表单 Vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
