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

Posted 2023-02-22

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

【英文标题】：How can I display the remaining key values when a user selects the first key from a JSON object in Vue.js?

【发布时间】：2020-05-05 02:38:45

【问题描述】：

我有一个简单的 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: 
 
);

要求的结果：

提前致谢！

【参考方案1】：

将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。

SANDBOX

【讨论】：

非常感谢！正是我想知道的:)

【参考方案2】：

为选定的国家/地区定义属性：

 data: 
    countries:[
       
        "country_name":"Afghanistan",
        "dial_code": "+93",
        "country_code": "AF"
       ,
       
        "country_name":"Zimbabwe",
        "dial_code": "+263",
        "country_code": "ZW"
       
    ],selectedCountry:Object

然后在您的模板中使用v-model 将select 绑定到selectedCountry

<select v-model="selectedCountry">
  <option v-for="country in countries">country.country_name </option>
</select>

然后您可以使用selectedCountry 渲染结果如下：

<p>
    Dial Code:  selectedCountry.dial_code 
</p>
<p>    
    Code:  selectedCountry.country_code 
</p> 

【讨论】：

感谢您的回复，但它似乎仍然不起作用。我通过 v-model 查看了两种方式的绑定，我猜它应该可以工作，但它不是......