Question

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

现在，我想为第二个输入字段添加一个空选项，当选择第一个选项时，应该保持可选状态。

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

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

}

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

提示：应该保留一个空选项

1 个答案: