상위 컴포넌트와 하위 컴포넌트 간의 Vue.js 동적 양방향 데이터 바인딩

상위 컴포넌트와 하위 컴포넌트 간의 Vue.js 동적 양방향 데이터 바인딩

v-for와 v-model의 조합을 사용하여 일부 입력 양식에 대한 양방향 데이터 바인드를 가져오려고 합니다.자 컴포넌트를 동적으로 만들고 싶다.현재 하위 구성 요소가 상위 데이터 개체를 업데이트하지 않습니다.

템플릿은 다음과 같습니다.

<div class="container" id="app">
  <div class="row">
    Parent Val
    {{ ranges }}
  </div>

   <div class="row">
     <button 
        v-on:click="addRange"
        type="button" 
        class="btn btn-outline-secondary">Add time-range
     </button>
    </div>

  <time-range 
    v-for="range in ranges"
    :box-index="$index"
    v-bind:data.sync="range">
  </time-range>

</div>

<template id="time-range">
  <div class="row">
    <input v-model="data" type="text">
  </div>
</template>

그리고 js 이것은

Vue.component('time-range', {
  template: '#time-range',
  props: ['data'],
  data: {}
})

new Vue({
  el: '#app',
  data: {
    ranges: [],
  },
  methods: {
    addRange: function () {
        this.ranges.push('')
    },
  }
})

js fieling도 만들었습니다.https://jsfiddle.net/8mdso9fj/96/

참고: 어레이를 사용하면 작업이 복잡해집니다. 별칭(v-for 변수)은 수정할 수 없습니다.

자주 언급되지 않는 한 가지 방법은 기본 입력 이벤트가 컴포넌트까지 버블되는 것을 포착하는 것입니다.네이티브를 발행하는 요소가 있는 한 Vue 이벤트를 체인에 전파하는 것보다 조금 더 간단한 방법이 될 수 있습니다.input또는change이벤트가 발생합니다.사용하고 있다change이 예에서는 필드를 떠날 때까지 이런 일이 발생하지 않습니다.어레이의 문제로 인해,spliceVue에게 요소의 변경을 알립니다.

Vue.component('time-range', {
  template: '#time-range',
  props: ['data']
})

new Vue({
  el: '#app',
  data: {
    ranges: [],
  },
  methods: {
  	addRange: function () {
    	this.ranges.push('')
    },
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div class="container" id="app">
  <div class="row">
    Parent Val
    {{ ranges }}
  </div>
  
   <div class="row">
     <button 
        v-on:click="addRange"
        type="button" 
        class="btn btn-outline-secondary">Add time-range
     </button>
    </div>

  <time-range 
    v-for="range, index in ranges"
    :data="range"
    :key="index"
    @change.native="(event) => ranges.splice(index, 1, event.target.value)">
  </time-range>
</div>

<template id="time-range">
  <div class="row">
    <input :value="data" type="text">
  </div>
</template>

수식자를 사용하려면 하위 구성요소가 다음 명령을 내보내야 합니다.update:부모가 잡아서 마법을 부리는 가변 이름 이벤트입니다.이 경우 가변명은 다음과 같습니다.datav-for alias 변수를 수정할 수 없기 때문에 어레이 하위 스크립트 표기법을 사용해야 하지만 Vue는 다음 사항에 대해 스마트합니다..sync어레이 요소 위에 배치되어 있기 때문에splice.

Vue.component('time-range', {
  template: '#time-range',
  props: ['data'],
  methods: {
    emitUpdate(event) {
      this.$emit('update:data', event.target.value);
    }
  }
})

new Vue({
  el: '#app',
  data: {
    ranges: [],
  },
  methods: {
  	addRange: function () {
    	this.ranges.push('')
    },
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div class="container" id="app">
  <div class="row">
    Parent Val
    {{ ranges }}
  </div>
  
   <div class="row">
     <button 
        v-on:click="addRange"
        type="button" 
        class="btn btn-outline-secondary">Add time-range
     </button>
    </div>

  <time-range 
    v-for="range, index in ranges"
    :data.sync="ranges[index]"
    :key="index">
  </time-range>

</div>

<template id="time-range">
  <div class="row">
    <input :value="data" type="text" @change="emitUpdate">
  </div>
</template>

언급URL : https://stackoverflow.com/questions/46044651/vue-js-dynamic-two-way-data-binding-between-parent-and-child-components