Vue v-for循环绑定对象键选择元素答案

【问题标题】：Vue v-for loop bind object key to select elementVue v-for循环绑定对象键选择元素
【发布时间】：2021-05-01 19:41:07
【问题描述】：

我有这样的数据 - phone 对象的键可以是“mobile”、“home”...

contacts[
  11:{
    name: "Mr Blobby"
    phone: {
      mobile: "07123 456789",
      home: "0201 2345 6789"
    }
    ...
  }
  ...{}

显示它（cRud）很容易：

<div v-for="contact in contacts" :key="contact.id" :contact="contact">
  <div v-for="(phone, type) in contact.phone" :key="type" :phone="phone">
    <b>{{ type }}</b>
    <h2>{{ phone }}</h2>
  </div>
</div>

但是如何使用 select 和 v-model (CrUd) 专门绑定键（移动/家庭...）？

<div v-for="(phone, index) in contact.phone" :key="phone">
   <input type="tel" v-model.trim="contact.phone[index]" />
   <select v-model="???">
      <option value="mobile">Mobile</option>
      option value="home">Home</option>
   </select>
</div>

【问题讨论】：

标签： vuejs3

【解决方案1】：

如果你想iterate through the properties of the phone object，下面的代码应该可以工作。然后，您可以使用 v-model 将选择值绑定到变量。

 <select v-model="selectedPhone">
  <option disabled value="">Select a phone</option>
  <option
   v-for="(value, name) in contact.phone"
   :key="value"
   :value="name"
  >
   {{ name }}
  </option>
 </select>

在 v-for 中，我们提供第二个参数 'name'（a.k.a. key），它将是 'mobile' 或 'home'，然后我们将其设置为选项值。所以我们将电话对象键设置为我认为你想要的选项值？

您还应该在组件的 data 选项中声明 v-model 变量的初始值。

data () {
 return {
  selectedPhone: ''
 }
}

【讨论】：

谢谢你 - 它确实显示了键，这就是我所追求的。