javascript - 当用户从 Vue.js 中的 JSON 对象中选择第一个键时，如何显示剩余的键值？

问题描述

我有一个简单的 API，它返回一个国家列表、他们的拨号代码和国家代码。当用户从选择选项中选择country_name时，我正在尝试显示dial_code和country_code 。稍后我将为选定的国家名称、代码和拨号代码设置状态。关键是我可以直接为其他两个设置状态，但我还需要向用户显示 country_code 和 dial_code。我评论的部分不起作用，因为它超出了v-for范围。我该如何解决这个问题？

这是HTML：


<div id="app">
<select>
  <option v-for="country in countries">{{country.country_name }}</option>
</select>
<!-- 
<p>
    Dial Code: {{ country.dial_code }}
</p>
<p>    
    Code: {{ country.country_code }}
</p> 
-->
</div>

这是 JS（我已经为演示修剪了 API 调用响应）：

new Vue({
  el: '#app',
  data: {
    countries:[
       {
        "country_name":"Afghanistan",
        "dial_code": "+93",
        "country_code": "AF"
       },
       {
        "country_name":"Zimbabwe",
        "dial_code": "+263",
        "country_code": "ZW"
       }
    ]
},
  methods: {
 }
});

要求的结果：

提前致谢！

标签： javascriptarraysjsonvue.js

与变量一起使用v-model，例如selectedCountry在其他答案中建议的那样。然后将其绑定到选择并添加value到选择中：

<select v-model="selectedCountry">
  <option
    v-for="(country, index) in countries"
    :value="country"
    :key="index"
  >{{country.country_name }}</option>
</select>

然后您将选定的对象存储在selectedCountry其中，您可以在模板中显示selectedCountry.dial_code和显示。selectedCountry.country_code

沙盒

javascript - 当用户从 Vue.js 中的 JSON 对象中选择第一个键时，如何显示剩余的键值？

问题描述

解决方案

推荐阅读