ajax-select.html

ajax-select.html

<style>

</style>

<template>
    <div>
        <!-- Displays selected item only
        after click on multiselect, then out of it.-->
        <multiselect
                :options.sync="options"
                :selected="selected"
                :multiple="false"
                :placeholder="placeholder"
                :clear-on-select="false"
                :on-search-change="fetchData"
                :on-change="onChange"
                :key="key"
                :label="label"
        ></multiselect>
        <!-- Properly displays the selected item -->
        <pre v-text="selected | json"></pre>
    </div>
</template>

<script>
    import {Multiselect} from 'vue-multiselect'
    import _ from 'lodash'

    export default{
        data(){
            return {
                options: [],
            }
        },
        props: {
            source: {type: String, required: true},
            selected: {type: Object, required: false},
            placeholder: {type: String},
            key: {type: String, default: 'id'},
            label: {type: String, default: 'name'},
        },
        watch: {
            selected (selected){
                if (selected) {
                    this.placeholder = selected.name
                }
            }
        },
        components: {
            Multiselect,
        },
        methods: {
            fetchData (value){
                let response = {filters: {}}
                response.filters[this.label] = value

                this.$api_demo.load(this.source, response)
                        .then(function (response) {
                            this.options = response.data
                        })
            },
            onChange (selected){
                this.$emit('selected', _.cloneDeep(selected))
            }
        }
    }
</script>