使用 v-model 并且仍然加载初始值（如果可用）

Question

我有一个子组件，我在其中传递customerData，如果可以作为道具使用。在该组件中，我将初始数据作为 customer 对象并在其上添加字段。但是，如果 customerData 可用并且对象中有该键，我想将其显示为默认值。我怎么能在仍然使用 v-model 的同时做到这一点？

 <child-component  :customer-data="customerData" > </child-component>

儿童

data: {
     customer: {}
},
props: {
    customerData: {type: Object}
}

<div>
    <input v-model="customer.name" />
    <input v-model="customer.age" />
    <input v-model="customer.address" />
</div>

Answer 1

您可以通过prop中发送的值更新childcomponent的customer数据：

const childcomponent = Vue.component('childcomponent', {
  template: '#childcomponent',
  data: () => ({ customer: {} }),
  props: { customer_data: {type: Object} },
  created() {
    this.customer = { ...this.customer, ...this.customer_data };
  }
});

new Vue({
  el:"#app",
  data: () => ({ customer_data: { name:'name', address:'address' } }),
  components: { childcomponent }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template id="childcomponent">
  <div>
    <input v-model="customer.name" />
    <input v-model="customer.age" />
    <input v-model="customer.address" />
  </div>
</template>

<div id="app">
  <childcomponent :customer_data="customer_data" />
</div>