如何在vue js中从select中获取值和文本？
提问于 2017-08-10 03:55:55
Html：
<select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
<option value="1">Double (Non a/c)</option>
<option value="2">Premium Double (a/c)</option>
<option value="3">Standard Double (a/c)</option>
</select>单击事件：
<a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a>脚本：
export default {
data(){
return{
facilitySelected:[]
}
}
methods: {
addFacilities() {
this.facilitySelected;
console.log(this.facilitySelected);
}
}
}这里我有一个select with选项列表，当我点击addFacilities时，所选选项的value只在console.log中作为输出，我需要让选项中的value和text都通过console.log显示出来。如何在单击addFacilities时同时获取value和text
回答 1
Stack Overflow用户
发布于 2017-08-10 04:09:49
在Vue中，你的value可以是一个复杂的对象。
在本例中，值是同时保存文本和值的对象。当它们被选中时，您可以看到它们在facilitySelected中都可用。
console.clear()
new Vue({
el: "#app",
data: {
facilitySelected: []
}
})<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
<select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
<option :value="{value: 1, text:'Double (Non a/c)'}">Double (Non a/c)</option>
<option :value="{value: 2, text:'Premium Double (a/c)'}">Premium Double (a/c)</option>
<option :value="{value: 3, text:'Standard Double (a/c)'}">Standard Double (a/c)</option>
</select>
<hr> Selected: {{facilitySelected}}
</div>
但您可以通过将选项存储在数据中来简化这一过程，并避免重复。
console.clear()
new Vue({
el: "#app",
data: {
facilitySelected: [],
options: [{
value: 1,
text: 'Double (Non a/c)'
},
{
value: 2,
text: 'Premium Double (a/c)'
},
{
value: 3,
text: 'Standard Double (a/c)'
}
]
}
})<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
<select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
<option v-for="option in options" :value="option">{{option.text}}</option>
</select>
<hr> Selected: {{facilitySelected}}
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45604178
复制相关文章
相似问题
有状态窗口小部件不重建
不能在showBotttomSheet的有状态小部件中使用提供程序
如何为有状态窗口小部件编写测试？
在使用提供程序时不应该使用有状态小部件吗？
Android游戏窗口小部件还是硬编码窗口小部件？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
