Vfrdtyky

I have a documentwith many input fields. Some are dependent on another, i.e. when in the first input field an option is selected, the second one should give the corresponding options based on a database query. This works fine.

Now I want to add for the second input field an empty option, wich should remain selectable when the first option is selected.

So far I have this solution:

<template>

    <div>

        <label for="ed_kbid" class="control-label">Bereich</label>

        <select2    v-model="bereichId":options="bereiche"  name="ed_kbid">

            <option disabled selected value="0">Select one</option>

        </select2>

    </div>

</template>

But the “Select one” disappears when in the first box is something selected.
How can I make it permanent?

Thanks!

edit:

<script>

import JQuery from 'jquery'

import Select2 from '@/components/Select2.vue'



let $ = JQuery



export default {

name: 'Bereich',



components: {

    Select2

},



data: function () {

    return {

        bereiche: ,

        kundeUebertrag: '',

        bereichId: 0



    }

},





computed: {

    kundeInputStore: function() 

    {

        return this.$store.state.kundeInputStore



    }

},



watch:{

    kundeInputStore: function() {

        let vm = this;

        vm.kundeUebertrag = vm.kundeInputStore;





        $.getJSON("/api/get_bereich.php", {kundeUebertrag: 

                   this.kundeUebertrag } , function(result){

            vm.bereiche = result;



        });



    },



    bereichId: function(value){

        this.$store.commit('setBereichInput', value)

    }



},

}

and the Select2-component:

<template>

<select class="form-control" >

    <slot></slot>

</select>

</template>





<script>

import JQuery from 'jquery'



let $ = JQuery



export default {

    name: 'select2',

    props: ['options', 'value'],





    mounted: function () {

        var vm = this

        $(this.$el)

        // init select2

            .select2({

                data: this.options,

                tags:true



            })

            // emit event on change.

            .on('change', function () {

                vm.$emit('input', this.value)

            })

        console.log( $(this.$el))



    },

    watch: {

        value: function (value) {

            // update value

            //console.log(value)

            $(this.$el)

                .val(value)

                .trigger('change')

        },

        options: function (options) {

            // update options

            $(this.$el).empty().select2({data: options,tags: true})

        }

    },

    destroyed: function () {

        $(this.$el).off().select2('destroy')

    }



}