小编Rob*_*blo的帖子

我有一个表单，当选择框更改时，它会更改 vue 组件中的一些文本。我在 jsfiddle 中创建了一个高度最小化的版本来显示我遇到的问题：

https://jsfiddle.net/ywaug7ft/

HTML：

<div id="app">
<h5>Select a gender</h5>
  <select v-model="gender">
    <option disabled="disabled" value>Select...</option>
    <option value="1">Male</option>
    <option value="2">Female</option>
    <option value="3">Couple</option>
  </select>
  <div></div>
  <detail-component v-for="(detail, index) in details" :data="detail" :index="index"></detail-component>

  {{details}}
</div>

<template id="details">
   <div>
     <h4><span v-if="item.gender == 3 && index == 0">Her</span><span
                v-else-if="item.gender == 3 && index == 1">His</span><span v-else>Your</span> Health Details</h4>
     <div>Index: {{index}}</div>
     <div>Gender: {{item.gender}}</div>
   </div>
</template>

视图：

Vue.component('detail-component', {
  template: '#details',
  props: ['data', 'index'],
  data() {
    return {
      item: {
        gender: this.data.gender
      }
    }
  } …

假设我想创建一个联系表单。在此联系表单中，用户可以有多个地址。我认为这是使用 Vue 组件的绝佳机会，这样我就不必创建多余的地址表单字段。然后我就可以在网站的不同区域使用这个组件，比如编辑、创建等......

我将如何创建一个父级可以使用的表单组件并将该表单中的值添加到地址数组中？此外，如果正在编辑此表单，我希望能够使用现有值填充此表单。

我尝试过不同的东西，但我尝试过的任何东西似乎都不起作用。有任何想法吗？我已经搜索过 Stack 和 Google，但没有找到答案。

这是我正在尝试完成的一些起始代码（粗略示例）。当然，我会允许用户在创建/编辑时动态添加多个地址，但我也会在编辑表单时循环遍历地址数据以显示每个地址组件，但这只是一个快速的非工作设置来理解我的观点穿过。

地址组件.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>

联系表格.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>