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

Posted 2023-05-07

【中文标题】Vue：空选项应保持可选状态

【英文标题】：Vue: An empty option should remain selectabe

【发布时间】：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 友好的方式添加）。

【参考方案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>