Javascript Vue不更新依赖于其他设备的输入

我正在构建这样的东西，我选择的国家将自动指定电话国家代码

国家/地区和国家/地区代码都存储在客户对象中，当我更改国家/地区的值时，会正确调用触发器，并且我可以在Vue开发工具中看到国家/地区代码的更改，但是相关输入不会更新。这是我的代码：

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

---

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

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

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

---

您可以在文档中找到更多详细信息

这是您应该如何做的，或者@Nora将对象属性初始化为

null的方法

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

---

原因是因为

你应该像这样定义你的客户对象customer:{country:null，countryCode:null，}，什么？成功了！我假设，由于我在created（）上设置了默认值，所以不需要在空对象中指定这些值。知道为什么需要这样做吗？另外，请将此作为一个单独的答案添加，以便我可以将其标记为已解决：）谢谢-我不确定这是否在臭名昭著的Vue警告范围内，但现在我看到它确实在范围内。@Anonymous很乐意帮助：）