Vue：空选项应保持可选状态答案

【问题标题】：Vue: An empty option should remain selectabeVue：空选项应保持可选状态
【发布时间】：2019-04-16 04:02:39
【问题描述】：

我有一个包含许多输入字段的文档。有些依赖于另一个，即当在第一个输入字段中选择了一个选项时，第二个应该根据数据库查询给出相应的选项。这很好用。

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

到目前为止，我有这个解决方案：

<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>

但是当第一个框中的内容被选中时，“选择一个”会消失。我怎样才能让它永久化？

谢谢！

编辑：

<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)
    }

},

}

和 Select2 组件：

<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')
    }

}

【问题讨论】：

提供“选择一项”相关代码
我已经编辑了帖子...
参考：jsfiddle.net/mani04/Lgxrcc5p
我正在通过 Select2 组件创建选项，因此该解决方案不适合我的情况..
我只想提一下：你不应该混合使用 Vue 和 jQuery。 Vue 基于创建虚拟 DOM 并对其进行维护，而 jQuery 则基于直接操作 DOM。 jQuery 提供的任何功能都不是 Vue 直接开箱即用的，也没有插件可以做（我可能会以对 Vue 友好的方式添加）。

标签： vue.js jquery-select2 html-select

【解决方案1】：

有点晚，但你可以使用：

<option :value="undefined">Select One</option>

然后你可以为需要渲染的其他选项做一个“for循环”：

<option :value="undefined"></option>
<option v-for="o in o.select_options" v-bind:value=o.option_value>{{o.option_name}}</option>

【讨论】：