Vue 바인딩 상위 및 하위 구성 요소

Vue 바인딩 상위 및 하위 구성 요소

Vue.js에서 부모 모델을 자녀에게 바인드하는 방법

다음 코드는 정상적으로 동작합니다.입력 내용을 수동으로 입력하면 자녀 모델이 부모 모델로 값을 반환합니다.

그러나 문제는 상위 AJAX 요청의 데이터 세트가 자동으로 채워지지 않는다는 것입니다.

누가 나 좀 도와줄래?

폼.vue

<template>
    <form-input v-model="o.name" :fieldModel="o.name" @listenChanges="o.name = $event"/>
    <form-input v-model="o.address" :fieldModel="o.address" @listenChanges="o.address = $event"/>
</template>

<script>
    import FormInput from '../share/FormInput.vue'

    export default {
        data () {
            return {
                o: {
                    name: '',
                    address: ''
                }
            }
        },
        components: { 'form-input': FormInput },
        created: function() {
            axios.get('http://api.example.com')
                .then(response => { 
                    this.o.name = response.data.name
                    this.o.address = response.data.address
                })
                .catch(e => { console.log(e) })
        }
    }
</script>

폼 입력표시하다

<template>
    <input type="text" v-model='fieldModelValue' @input="forceUpper($event, fieldModel)">
</template>

<script>
    export default {
        props: ['fieldModel'],
        data() {
            return {
                fieldModelValue: ''
            }
        },
        mounted: function() {
            this.fieldModelValue = this.fieldModel;
        },
        methods: {
            forceUpper(e, m) {
                const start = e.target.selectionStart;
                e.target.value = e.target.value.toUpperCase();
                this.fieldModelValue = e.target.value.toUpperCase();
                this.$emit('listenChanges', this.fieldModelValue)
            }
        }
    }
</script>

컴포넌트를 활용하면 일이 더 간단해집니다.

를 붙이면v-model컴포넌트에서는 컴포넌트는 다음 이름의 프로펠러를 사용해야 합니다.value, 및 방출해야 합니다.input이벤트 갱신을 트리거합니다.

나는 그것을 만드는 것을 좋아한다.computed사건 발생을 감추고, 제가 그냥 할 수 있게 해주십시오.v-model그computed내 컴포넌트 안에.

new Vue({
  el: '#app',
  data: {
    o: {
      name: '',
      address: ''
    }
  },
  components: {
    'form-input': {
      template: '#form-input',
      props: ['value'],
      computed: {
        fieldModelValue: {
          get() {
            return this.value;
          },
          set(newValue) {
            this.$emit('input', newValue.toUpperCase());
          }
        }
      }
    }
  },
  // Simulate axios call
  created: function() {
    setTimeout(() => {
      this.o.name = 'the name';
      this.o.address = 'and address';
    }, 500);
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  Name ({{o.name}})
  <form-input v-model="o.name"></form-input>
  Address ({{o.address}})
  <form-input v-model="o.address"></form-input>
</div>

<template id="form-input">
    <input type="text" v-model='fieldModelValue'>
</template>

그mounted()후크가 부모로부터의 후속 업데이트를 차단하고 있습니다.

마운트된 v-model을 제거하고 'fieldModel'로 변경

<template>
    <input type="text" :value='fieldModel' @input="forceUpper($event, fieldModel)">
</template>

<script>
  export default {
    props: ['fieldModel'],
    data() {
      return {
          fieldModelValue: ''
      }
    },
    // mounted: function() {
    //   this.fieldModelValue = this.fieldModel;
    // },
    methods: {
      forceUpper(e, m) {
        const start = e.target.selectionStart;
        e.target.value = e.target.value.toUpperCase();
        this.fieldModelValue = e.target.value.toUpperCase();
        this.$emit('listenChanges', this.fieldModelValue)
      }
    }
  }
</script>

데모 코드 샌드박스

언급URL : https://stackoverflow.com/questions/48429973/vue-binding-parent-and-child-components