new Vue({
el:"#app",
data : {
criterios : '',
criterios_list: [
{'value' : 'S_cheque', 'label' : 'S/cheque'},
{'value' : 'S_cartao', 'label' : 'S/cartão Faturado'},
{'value' : 'Somente_cartao', 'label' : 'Somente cartão Faturado'}]
}
});
<v-select multiple v-model="criterios" :options="criterios_list"></v-select>
{{criterios}}
I do not know if this is the best way, but I managed to solve this problem by turning the element into a simple array:
new Vue({
el:"#app",
data : {
criterios : '',
criterios_list: ['S/cheque','S/cartão Faturado']
}
});
<v-select multiple v-model="criterios" :options="criterios_list"></v-select>
{{criterios}}
According to the Vuetify documentation , you can use the item-text properties % and item-value with the object keys to customize it.
Follow your modified example.
new Vue({
el:"#app",
data: {
criterios : '',
criterios_list: [
{'value' : 'S_cheque', 'label' : 'S/cheque'},
{'value' : 'S_cartao', 'label' : 'S/cartão Faturado'},
{'value' : 'Somente_cartao', 'label' : 'Somente cartão Faturado'}]
}
});<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-select multiple v-model="criterios"
:items="criterios_list"
item-text="label"
item-value="value"></v-select>
{{criterios}}
</v-app>
</div>
<v-select multiple
v-model="criterios"
:options="criterios_list"
label="label"
value="value">
</v-select>