Vue没有更新依赖于另一个的输入

我正在构建类似的东西，我选择的国家会自动指定电话国家/地区代码。Vue没有更新依赖于另一个的输入

两个国家和COUNTRYCODE的但是存储在客户对象，当我改变了这个国家的价值，触发正确调用，我可以看到的国家代码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">

我在做什么错？为什么我会在开发工具中看到更新的数据，但它不会被视为被动，而且我的国家/地区代码输入保持不变？

来源

2017-05-29 Anonymous

您应该如此定义您的客户对象 'customer：{country：null，countryCode：null，}，' – Nora

什么？这工作！我假设，因为我在创建（）时设置了默认值，我不需要在空对象中分配这些值。任何想法为什么这是必要的？此外，请添加此作为一个单独的答案，所以我可以将其标记为已解决:) – Anonymous

你应该定义你的客户对象，像这样的客户：

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

您可以在文档中找到更多的细节here

来源

2017-05-29 12:55:13 Nora

这是你建议立即进行删除怎么做，或@初始化对象属性的娜拉的方法到null

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

其原因是因为change detection caveats in vue reactivity

来源

2017-05-29 13:01:01

感谢您 - 我不确定这是否是臭名昭着的Vue警告或不，但现在我明白了。 – Anonymous

@匿名高兴帮忙:) –

Vue没有更新依赖于另一个的输入

回答

相关问题