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);
}
}
}
这里我有一个选择列表,
当我点击addFacilities
时,所选选项的value
仅作为console.log
的输出,我需要同时拥有value
和text
在通过console.log出来的选项中。当我点击value
时,如何获得text
和addFacilities
?
答案 0 :(得分:3)
在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>