在VueJs中将Combobox绑定到Array
在VueJs中将Combobox绑定到Array
提问于 2020-10-07 15:30:58
我有两个字段。研讨会|参与状态
研讨会是已经举办的研讨会的列表。参与状态显示参与者的状态，即已参与、未参与、访客等。对于每个研讨会，都有一个显示可能的参与状态的选择框。研讨会列表是动态的。
因此，典型的行将如下所示
<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>诸若此类。
在我的脚本中，我使用了CDN btw。
<script>
var vm=new Vue({
el:'#app'
})因此，如果有人选择了一个研讨会，那么他们就会选择自己的参与状态。我希望将研讨会和状态存储在下面给出的结构中。
this.workshops.push({workshop:"Workshop 1", status:"P" }然而，我在这方面遇到了问题。由于所有选择框都绑定到同一模型，因此其中一个框的更改会触发所有框的更改。一旦选择了特定的研讨会和参与状态，我就想将信息添加到研讨会对象中。我在做这件事上遇到了困难。
我是Vue的新手，正在使用没有单页应用程序的CDN。
提前谢谢。
https://jsfiddle.net/zeenux/peL9acfh/7/#&togetherjs=0Qeqn23QRj
回答 1
Stack Overflow用户
发布于 2020-10-07 18:14:00
你说过你有一个动态的研讨会列表。
然后对其进行迭代：
<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>与其使用v-model作为复选框，也许应该将一个函数绑定到@input，当为true时为push，当为false时为splice
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64239296
复制相关文章
相似问题
腾讯云开发者
