Vue nicht aktualisieren Eingang, der auf einem anderen

Question

Ich baue so etwas, wo das Land, das ich wähle automatisch den Telefon-Ländercode diktieren.

Sowohl das Land und Ländercode werden in einem Kundenobjekt gespeichert, und wenn ich den Wert des Landes zu ändern bin, wird der Trigger richtig genannt, und ich kann den Ländercode zu ändern in Vue Entwickler-Tools sehen, aber Die zugehörige Eingabe wird nicht aktualisiert. Dies ist mein Code:

data: function() { 
     return { 
      customer: {}, 
      countries: this.$store.state.settings.countries, 
     } 
    }, 
    created: function() { 
     var defaultCountry = _.find(this.countries, { default: true }); 

     this.customer.country = defaultCountry.name; 
     this.customer.countryCode = defaultCountry.code; 
    }, 
    methods: { 
     updateCountryCode: function(country) { 
      this.customer.countryCode = country.code; 
     }, 
    } 

Und das ist die relevante HTML:

<vSelect 
label="name" 
v-model="customer.country" 
:options="countries" 
:onChange="updateCountryCode"> 
</vSelect> 

<input type="text" disabled :value="customer.countryCode"> 

Was mache ich falsch? Warum sehe ich, dass die Daten auf Dev-Tools aktualisiert werden, aber nicht als reaktiv und meine Ländercode-Eingabe bleibt gleich?

Answer 1

Sie sollten Ihre Kundenobjekt wie so Kunden definieren:

{ 
    country: null, // or some other default value 
    countryCode: null, 
}, 

Sie können weitere Informationen in der Dokumentation here

Answer 2

Dies ist, wie Sie es shoul tun finden oder @ Nora Verfahren zur Bestimmung der Objekteigenschaften zu initialisieren zu null ist

updateCountryCode: function(country) { 
    this.$set(this.customer, 'countryCode', country.code) 
}, 

Und der Grund, wegen change detection caveats in vue reactivity