Styling selected value in Vue Select

Question

I'm using vue select. In the dropdown, there are the labels (not only text). Is it possible to have also the label for the selected value?

                            <div class="form-group row">
                                <label for="project_status_id"  class="col-sm-3 col-form-label">Projekt Status</label>
                                <div class="col-sm-9">
                                    <v-select  :options="resources.activeProjectStatus" :reduce="project_status_id => project_status_id.id"  v-model="form.project_status_id" label="name" id="project_status_id" placeholder="Projekt Status" :class="$vSelectStyle($v.form.project_status_id)">
                                        <template v-slot:option="option" >
                                            <div v-html="option.status_label" class="mb-1">
                                            </div>
                                        </template>
                                    </v-select>
                                    <template v-if="$v.form.project_status_id.$error">
                                        <p class="text-danger" v-if="!$v.form.project_status_id.required">
                                            Projekt - Status ist erforderlich!
                                        </p>
                                    </template>
                                </div>
                            </div>

If it doesnt come out of the box with this functionality you could definitely add a new class to the label you talked about and add some logic to change it based on what was picked. — Kevin Hernandez, Mar 05 '20 at 15:27

score 2 · Accepted Answer · answered Mar 05 '20 at 17:13

Assuming you want the HTML of the status_label, also assuming that status_label is a template string or similar, then use the selected-option slot with the slot's content being the same as your option slot without the class attached.

The key part in the example below is, as mentioned, the selected-option slot:

<!-- Using OP's `option` key -->
<template v-slot:selected-option="option">
  <div v-html="option.status_label"></div>
</template>

The example below is a fork of Vue-Select's Codepen example with modifications for the answer.

Vue.config.productionTip = false;
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
  el: '#app',
  data: {
    options: [
      {
        name: `<span style="padding: 4px; background: green; border-radius: 0.25rem; color: white;">Foo</span>`
      },
      {
        name: `<span style="padding: 4px; background: orange; border-radius: 0.25rem; color: white;">Bar</span>`
      },
      {
        name: `<span style="padding: 4px; background: red; border-radius: 0.25rem; color: white;">Baz</span>`
      }
    ]
  }
});

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600">

<div id="app">
  <h1>Vue Select</h1>
  <v-select :options="options" label="label">
    <template v-slot:option="option" >
      <div v-html="option.name" style="padding: 2px 0;"></div>
    </template>
    <template v-slot:selected-option="option">
      <div v-html="option.name"></div>
    </template>
  </v-select>
</div>

Styling selected value in Vue Select

1 Answers1