我具有用于获取用户联系人的自定义模板:
<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: '' })
}
}
}
运行代码时,不会自动设置选择第一个选项。从数组中读取选择选项时如何自动设置它?
在这里您可以看到代码结果预览:
答案 0 :(得分:0)
所以尝试这样的事情:
this.contacts.push({ contactType: 'Phone', contact: '' })