Search code examples
vue.jsvue-select

Styling selected value in Vue Select

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>

enter image description here

Solution

  • 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>