时间戳

首页 > 解决方案 > Vue v-for循环绑定对象键选择元素

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

问题描述

我有这样的数据 - 电话对象的键可以是“移动”，“家庭”......

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

解决方案

如果您想遍历电话对象的属性，下面的代码应该可以工作。然后，您可以使用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'（aka key），它将是 'mobile' 或 'home'，然后我们将其设置为选项值。所以我们将电话对象键设置为我认为你想要的选项值？

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

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

推荐阅读