Почему бы не установить автоматический выбор первого тега?

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: '' })
    }
  }
}

Когда я запускаю свой код, выбор первого варианта не устанавливаетсяавтоматически.Как я могу установить его автоматически при чтении опций выбора из массива?

Здесь вы можете увидеть предварительный просмотр кода:

Answer 1

Так что попробуйте что-то вроде этого:

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