0

I'm not sure how to set a default/initial selected option using vue-select, specifically when you use slots.

Here is the code: https://vue-select.org/guide/slots.html

I would want one of the options to initially display on page load.

wsyq1n
  • 117
  • 2
  • 10
  • Thanks for your question! If you are able to include the text of the code sample, any error messages, and what steps you've taken to solve the problem, that would improve your chances of getting an answer. – jeffhale Oct 26 '19 at 22:58

1 Answers1

0

Pass the option object you want as a default value into the v-model prop of the component.

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    selectedOption: {
          title: 'Read the Docs',
          icon: 'fa-book',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
    },
    options: [
      {
          title: 'Read the Docs',
          icon: 'fa-book',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View on GitHub',
          icon: 'fa-github',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View on NPM',
          icon: 'fa-database',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View Codepen Examples',
          icon: 'fa-pencil',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        }
    ]
  }
})
body {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

h1,.muted {
  color: #2c3e5099;
}

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

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

#app .dropdown li {
  border-bottom: 1px solid rgba(112, 128, 144, 0.1)
}

#app .dropdown li:last-child {
  border-bottom: none;
}

#app .dropdown li a {
  padding: 10px 20px;
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 1.25em;
}

#app .dropdown li a .fa {
  padding-right: 0.5em;
}
<script src="https://unpkg.com/vue-select@3.2.0/dist/vue-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>Vue Select - Custom Option Templating</h1>
  <v-select :options="options" v-model="selectedOption" label="title">
    <template slot="option" slot-scope="option">
        <span class="fa" :class="option.icon"></span>
        {{ option.title }}
    </template>
  </v-select>
</div>
Kronosfear
  • 79
  • 4