vue.js - 为什么不设置自动选择标签第一个选项？

Question

我有用于获取用户联系人的自定义模板：

<div class="row pl-3" v-for="contact in contacts">
  <div class="col-xs-6 mr-2 mb-2">
    <select class="form-control" v-model="contact.contactType">
      <option v-for="item in getContactTypes">{{item}}</option>
    </select>
  </div>
  <div class="col-xs-6 mb-2">
    <input type="text" class="form-control" id="contact" placeholder="Enter contact" v-model="contact.contact">
  </div>
</div>
<div class="row pl-3 mt-2">
  <button class="btn btn-info btn-sm" @click="addContact">Add Contact</button>
</div>

Javascript代码：

export default {
  data() {
    return {
      getContactTypes: {
        1:"Phone",
        2:"Facebook",
        3:"Instagram",
        4:"Telegram"
      },
      contacts: [{ contactType: '', contact: '' }],
    }
  },
  methods: {
    async addContact () {
      this.contacts.push({ contactType: '', contact: '' })
    }
  }
}

当我运行我的代码时，选择第一个选项没有自动设置。从数组中读取选择选项时如何自动设置它？

在这里你可以看到代码结果预览：

标签： vue.jsvuejs2frontendnuxt.js

Answer 1

所以尝试这样的事情：

this.contacts.push({ contactType: 'Phone', contact: '' })