Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

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>

 

Riadh Rahmi

Senior Web Developer (Drupal & Laravel)

I am a senior web developer, I have experience in planning and developing large scale dynamic web applications especially in Drupal and Laravel.

Web Posts

Search

Page Facebook