I know how to bind a Vue application to a select with multiple attribute.
But in this particular case, I have a list of checkboxes that can be turned on or off. They are attributes of a residency to reserve.
For example, user sees a list of features of an accommodation like :
How can I bind these?
You can achieve this by using vue-multiselect library.
Demo :
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: [],
accommodation: [{
feature: 'Party'
},
{
feature: 'Food'
},
{
feature: 'Oven'
},
{
feature: 'AC'
}
]
},
methods: {
customLabel(option) {
return `${option.feature}`
},
isSelected(option) {
return this.value.some((op) => op.feature === option.feature)
}
}
}).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<div id="app">
<multiselect v-model="value" :options="accommodation" :multiple="true" track-by="feature" :custom-label="customLabel" :close-on-select="false">
<span class="checkbox-label" slot="option" slot-scope="scope">
{{ scope.option.feature }}
<input class="test" type="checkbox" :checked="isSelected(scope.option)" @focus.prevent :key="scope.option.feature" />
</span>
</multiselect>
</div>