Example How to custom option and selected options templating in Vue-Select in Vuejs:
Example 1:
<v-select :options="options" label="title">
<template slot="selected-option" slot-scope="option">
<div class="flex">
<div class="col">
<span class="fa" :class="option.icon"></span>
<span>Selected item: {{ option.title }}</span>
</div>
</div>
</template>
<template slot="option" slot-scope="option">
<span class="fa" :class="option.icon"></span>
{{ option.title }}
</template>
</v-select>
Example 2:
<v-select :options="options" label="title">
<template slot="option" slot-scope="option">
<span class="fa" :class="option.icon"></span>
{{ option.title }}
</template>
</v-select>
Example 3 how to change label option:
methods: {
getLabel: function(val){
if(typeof val === 'object'){
return val.first_name;
}else {
return this.options.filter(function(option){
return option.ip_address === val;
})[0].first_name;
}
}
}
And on the component instance add the prop :get-option-label="getLabel"
<v-select :get-option-label="getLabel" v-model="selected" label="first_name" :options="options"></v-select>
