Vue不更新​​依赖于另一个

Question

我正在构建类似这样的内容，我选择的国家/地区会自动指定电话国家/地区代码。

country和countryCode都存储在一个客户对象中，当我更改国家/地区的值时，触发器被正确调用，我可以看到Vue dev工具中的国家/地区代码发生​​了变化，但是相关输入不会更新。这是我的代码：

    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;
        },
    }

这是相关的HTML：

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

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

我做错了什么？为什么我在开发工具上看到数据正在更新，但它没有被动反应并且我的国家/地区代码输入保持不变？

Answer 1

您应该像客户一样定义客户对象：

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

您可以在文档here

中找到更多详细信息

Answer 2

这是你应该怎么做或@ Nora将对象属性初始化为null

的方法

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

原因在于change detection caveats in vue reactivity