Javascript 将组合框绑定到VueJs中的数组

我有两个字段。 研讨会|参与情况

研讨会是已举办的研讨会的列表。参与状态显示参与者状态，即参与、未参与、来宾等。对于每个研讨会，有一个选择框显示可能的参与状态。车间列表是动态的

所以一个典型的争吵会是这样的

<input type="checkbox" v-model="workshop_attended">Workshop 1
<select v-model="participation_status">
<option value="P">Participant</option>
<option value="G">Guest</option>


<input type="checkbox" v-model="workshop_attended">Workshop 2
<select v-model="participation_status">
<option value="P">Participant</option>
<option value="G">Guest</option>

然而，我在这方面遇到了问题。由于所有选择框都绑定到同一个模型，因此一个选择框中的更改将触发所有选择框中的更改。我希望在选择特定研讨会并选择参与状态后，立即将信息添加到“研讨会”对象。我做这件事有困难

我是Vue新手，使用CDN时没有使用单页应用程序

提前谢谢

---

您说过您有一个车间动态列表

然后对其进行迭代：

<div v-for="(workshop, index) in workshops" :key="index" >    
<input type="checkbox" v-model="workshop.selected">
{{workshop.name}}
<select v-model="workshop.status">
<option value="P">Participant</option>
<option value="G">Guest</option>
</div>

{{workshop.name}
参与者
客人

与其在复选框中使用v-model，不如将一个函数绑定到@input，该函数为true时推送，为false时拼接

this.workshops.push({workshop:"Workshop 1", status:"P" }

<div v-for="(workshop, index) in workshops" :key="index" >    
<input type="checkbox" v-model="workshop.selected">
{{workshop.name}}
<select v-model="workshop.status">
<option value="P">Participant</option>
<option value="G">Guest</option>
</div>