Vue2 :处理X个下拉菜单上的更改事件？
Vue2 :处理X个下拉菜单上的更改事件？
提问于 2017-10-31 07:29:37
我已经阅读了如何在select/option列表上使用v-model的示例……当您有一个下拉列表时，这就解决了问题。
我的问题来了，因为我有x个下拉列表(根据我的模型返回的数据生成)。它是动态生成的，可能存在从0到4-5个下拉列表的任何内容。
该模型与这里的问题没有任何关系，但以下是我如何生成下拉列表：
<div v-if="item.FoodProperties">
<div v-for="fp in item.FoodProperties" class="col-xs-6">
<span>{{ fp.Name }}</span>
<select>
<option value="" style="font-size:80%">Velg</option>
<option style="font-size:80%" v-for="itm in fp.FoodPropertyOptions" :value="itm.Id">{{ itm.Name }}</option>
</select>
</div>
</div>所以..。有没有人对此有过经验，能告诉我如何从每个下拉列表中获得所选值？
回答 1
Stack Overflow用户
发布于 2017-10-31 20:51:33
是否要为模型上的一个字段绑定多个可用选项？如果是这样的话，您可以使用以下命令：
<div v-if="item.FoodProperties">
<div v-for="fp in item.FoodProperties" class="col-xs-6">
<span>{{ fp.Name }}</span>
<select v-model="item.FoodProperty">
<option value="" style="font-size:80%">Velg</option>
<option style="font-size:80%" v-for="itm in fp.FoodPropertyOptions" :value="itm.Id">{{ itm.Name }}</option>
</select>
</div>
</div>编辑:在评论之后，我认为这应该是可行的：
<div v-if="item.FoodProperties">
<div v-for="(fp, index) in item.FoodProperties" class="col-xs-6">
<span>{{ fp.Name }}</span>
<select v-model="item.FoodProperty[index]">
<option value="" style="font-size:80%">Velg</option>
<option style="font-size:80%" v-for="itm in fp.FoodPropertyOptions" :value="itm.Id">{{ itm.Name }}</option>
</select>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47025743
复制相关文章
相似问题
腾讯云开发者
