How to use vue-select - 9 common examples

const moment = require('moment');
const _ = require('lodash');
const VSelect = require('vue-select').VueSelect;
const InputMixin = require('../../mixins/InputMixin');
const Utils = require('../../../../../utils/utils');
const Messages = require('../../../../../api/messages');
const LangMixin = require('../../../../../mixins/LangMixin');
const ASCIIFolder = require('fold-to-ascii');

module.exports = {
    props: {
        name: { required: true, type: String },
        label: { default: '', type: String },
        placeholder: { default: '', type: String },
        isRequired: { default: false, type: Boolean },
        // form: { required: true, type: String }, //InputMixin
        multi: { default: false, type: Boolean },
        readonly: { default: false, type: Boolean },
        options: { required: true, type: Array },

const moment = require('moment');
const _ = require('lodash');
const VSelect = require('vue-select').VueSelect;
const InputMixin = require('../../mixins/InputMixin');
const Utils = require('../../../../../utils/utils');
const Messages = require('../../../../../api/messages');
const LangMixin = require('../../../../../mixins/LangMixin');
const ASCIIFolder = require('fold-to-ascii');

module.exports = {
    props: {
        name: { required: true, type: String },
        label: { default: '', type: String },
        placeholder: { default: '', type: String },
        isRequired: { default: false, type: Boolean },
        // form: { required: true, type: String }, //InputMixin
        multi: { default: false, type: Boolean },
        readonly: { default: false, type: Boolean },
        options: { required: true, type: Array },

mounted() {
            this.selectedProject = this.project;
            this.selectedResource = this.resource;

            this.$parent.$on('loaded-issues', () => {
                this._setResourceOptions();
                this._resetInput();
            });
            this.$parent.$on('loaded-mergeRequests', () => {
                this._setResourceOptions();
                this._resetInput();
            });
        },

        components: {
            'v-select': require('vue-select').VueSelect
        },

        methods: {
            start(event) {
                event.preventDefault();
                this.$emit('start');
            },
            stop(event) {
                event.preventDefault();
                this.$emit('stop');
            },
            cancel(event) {
                event.preventDefault();
                this.$emit('cancel');
            },

const _ = require('lodash');
const VSelect = require('vue-select').VueSelect;
const WidgetMixin = require('../../../../../../common/mixins/WidgetMixin');

module.exports = {
    mixins: [WidgetMixin],
    props: {
        boxed: { type: Boolean, default: false },
        title: { type: String, default: '' },
        extraClasses: { default: '', type: String },
    },
    components: {
        'v-select': VSelect,
    },
    data() {
        return {
            state: {
                selected: [],

const moment = require('moment');
const _ = require('lodash');
const LangMixin = require('../../../../mixins/LangMixin');
const MappingTypes = require('../../../../lists/mapping_types');
const VSelect = require('vue-select').VueSelect;

module.exports = {
    mixins: [LangMixin],
    props: {
        removable: { type: Boolean, default: true },
        openable: { type: Boolean, default: true },
        name: { type: String, required: true },
        content: { type: Object, required: true },
    },
    components: {
        VSelect,
    },
    data() {
        return {
            state: {
                opened: false,

const _ = require('lodash');
const VSelect = require('vue-select').VueSelect;
const WidgetMixin = require('../../../../../../common/mixins/WidgetMixin');

module.exports = {
    mixins: [WidgetMixin],
    props: {
        boxed: { type: Boolean, default: false },
        title: { type: String, default: '' },
        extraClasses: { default: '', type: String },
    },
    components: {
        'v-select': VSelect,
    },
    data() {
        return {
            state: {
                selected: [],

* building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('v-pagination', require('./components/Pagination.vue'));
Vue.component('search-page', require('./components/Search.vue'));
Vue.component('v-select', require('vue-select').VueSelect);
Vue.component('search-result', require('./components/Result.vue'));

const app = new Vue({
    el: '#app'
});

const _ = require('lodash');
const moment = require('moment');
const APIRoutes = require('../../../api/routes');
const Messages = require('../../../api/messages');
const LangMixin = require('../../../mixins/LangMixin');
const FormCleanerMixin = require('../../../mixins/FormCleanerMixin');
const FormMixin = require('../../../mixins/FormMixin');
const FiltersMixin = require('../../../mixins/FiltersMixin');
const Handlebars = require('../../../../../app/modules/utils/templating');

const VSelect = require('vue-select').VueSelect;
const Bar = require('./charts/Bar.vue');
const Histogram = require('./charts/Histogram.vue');
const Pie = require('./charts/Pie.vue');

module.exports = {
    mixins: [LangMixin, FormMixin, FormCleanerMixin, FiltersMixin],
    props: {
        charts: { type: Array, required: true },
        defaultState: { type: Object, default: () => ({}) },
    },
    components: {
        Pie,
        Histogram,
        Bar,
        VSelect,
    },