vue綁定父子組件

Question

如何在 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>

表單輸入.vue

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

Answer 1

如果您利用組件中的v-model ，事情會更簡單。

如果你把v-model放在一個組件上，該組件應該接受一個名為value的道具，並且應該發出input事件來觸發它更新。

我喜歡創建一個computed來隱藏事件發射，並允許我對組件內部的computed進行v-model 。

 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>

Answer 2

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>

演示代碼沙盒