@cone2875/vue-formulate-select

Introduction

Vue Formulate Select is a Vue Formulate plugin that provides the Vue Select UI into a FormulateInput.

Installation

NPM

npm i vue-select @cone2875/vue-formulate-select

Add to Vue

As with any Vue Formulate plugin:

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'

import FormulateVSelectPlugin from '@cone2875/vue-formulate-select'

// !important
// Import the vue-select css
import 'vue-select/dist/vue-select.css';

Vue.use(VueFormulate, {
    plugins: [ FormulateVSelectPlugin ]
})

Usage

Use vue-select as the input type.

<FormulateInput
    type="vue-select"
    :options="[
        {value: 'MX', label: 'Mexico'},
        {value: 'TH', label: 'Thailand'},
        {value: 'BI', label: 'Burundi'},
    ]"
    />

It works as any other FormulateInput.

Caveats

Vue Formulate and Vue Select have different approaches when parsing arrays of objects. Vue Formulate requires these objects to include a label and value property, whereas Vue Select has a much more flexible approach with the reduce and label props. We had to take the more restrive approach of Vue Formulate. The vue-select reduce and label props are currently hard-coded as:

<v-select
    :reduce="x => x.value"
    label="label"
    />

As such, using the taggable prop wil always require you to define createOption too.

Moreover, Vue Formulate normalizes the value into a string value. Thus, using objects as values is impossible. Secondly, using numbers as the value can result in the following problem:

<!-- template -->
<FormulateInput
    type="vue-select"
    v-model="val"
    :options="options"
    />

// script
export default {
    data(){
        return {
            val: 3,
            options: [
                {value: '1', label: 'Mexico'},
                {value: '2', label: 'Thailand'},
                {value: '3', label: 'Burundi'},
            ]
        }
    }
}

Will display an initial value of "3" in the input, not "Burundi". It is thus necessary to turn val into "3" before the FormulateInput is created and turn it back into a number before submission, when necessary.