재사용 가능한 폼 Vue 구성 요소 생성 방법

재사용 가능한 폼 Vue 구성 요소 생성 방법

예를 들어 연락처 양식을 작성한다고 가정해 보겠습니다.이 연락처 양식에서는 사용자가 여러 주소를 가질 수 있습니다.Vue Component를 사용하면 중복 주소 폼 필드를 작성할 필요가 없어집니다.이 컴포넌트는 편집, 작성 등 웹 사이트의 다른 영역에서 사용할 수 있습니다.

부모가 사용할 수 있는 폼 컴포넌트를 만들고 해당 폼의 값을 주소 배열에 추가하려면 어떻게 해야 합니까?또, 이 폼을 편집하고 있는 경우는, 기존의 값으로 채울 수 있으면 좋겠다고 생각하고 있습니다.

여러 가지 시도를 해봤지만 아무 것도 효과가 없는 것 같아요.좋은 생각 있어요?Stack과 Google을 검색해 봤지만 답을 찾을 수 없었습니다.

여기 내가 달성하려는 것의 시작 코드가 있다(예시하지 않음).물론 사용자가 작성/편집 시 여러 주소를 동적으로 추가할 수 있지만 각 주소 컴포넌트를 표시하기 위해 주소 데이터를 통해 폼 루프를 편집하는 것도 허용하지만 이는 내 요점을 전달하기 위한 간단한 비작업 설정일 뿐입니다.

Address Component(주소 컴포넌트).표시하다

<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>

Contact Form(연락처 폼)표시하다

<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>

이런 식으로 데이터를 전달한 후 부모에게 변경 내용을 다시 보냅니다.

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>

언급URL : https://stackoverflow.com/questions/49307357/how-to-create-a-reusable-form-vue-component