当我在vue中对select标记中的选定选项进行v绑定时，我如何将v模型绑定到数据()

Question

我引入一个数组(contacts(，并在选项标记中对其进行迭代，如果数组contact id等于selected_contact，则显示为selected。这很好，但我想将新选择的选项绑定到数据以添加新的活动，但它不起作用。我做错了什么？

<select v-model="selected" class="border py-2 px-3 text-grey-800 w-full" name="contact_id">

<option v-for="contact in contacts" v-bind:selected="contact.id === selected_contact">{{contact.name}}
</option>
</select>

这是我的数据((

data() {
return {
name: '',
selected: '',
activity_type_id: '',
comments: ''
}
},

然后我试着用这个onclick:发送它

<div class="px-8 py-4 border-gray-200 flex items-center">
<button @click="addActivity" class="bg-teal-300 hover:bg-teal-800 text-white font-bold py-2 px-4 rounded ml-4 mt-3 mr-15">Add Activity</button>

</div>

使用下面的addActivity函数：

addActivity(){
let activityAdd = {
comments: this.comments,
contact_id: this.selected,
activity_type_id: this.activity_type_id,
}
console.log(activityAdd);
this.$inertia.post('/activity', activityAdd)
},

Answer 1

通过绑定值

<template>
<div>
<select v-model="selected" class="border py-2 px-3 text-grey-800 w-full" name="contact_id">
<option
v-for="contact in contacts"
:key="contact.id"
:value="contact.id"
>{{contact.name}}</option>
</select>
</div>
</template>

使用计算属性

<template>
<div>
<select v-model="selected" class="border py-2 px-3 text-grey-800 w-full" name="contact_id">
<option v-for="contact in contacts" :key="contact.id">{{contact.name}}</option>
</select>
</div>
</template>

选定的是一个对象，因此您可以像这样初始化它：

data() {
return {
name: "",
selected: {},
activity_type_id: "",
comments: "",
};
},

您可以使用计算属性来获取id:

computed: {
selectedID: function () {
return this.selected.id;
},
}

方法变为：

methods: {
addActivity() {
let activityAdd = {
comments: this.comments,
contact_id: this.selectedID,
activity_type_id: this.activity_type_id,
};
this.$inertia.post("/activity", activityAdd);
},
},