时间戳

首页 > 解决方案 > vuejs - 引导选择选项不起作用

javascript - vuejs - 引导选择选项不起作用

问题描述

我有这个选择：

                <select v-model="filterState" @change="search()" class="selectpicker livesearch form-control" ref="stateSelect" id="stateSelect">
                    <option value="">Alle Status</option>
                    <option v-for="assignmentState in assignmentStates" v-bind:value="assignmentState.state">
                        {{ assignmentState.state }}
                    </option>
                </select>

只有当我像这样刷新它时它才会起作用：

export default {
    name: "AssignmentList",
    data() { ....
},
updated() {
    $(this.$refs.stateSelect).selectpicker('refresh');
}

但是使用这种方法，“livesearch”之类的选项不起作用。

// Select2 Livesearch
$('.livesearch').selectpicker({
    liveSearch: true,
    noneSelectedText: 'Nichts ausgewählt',
});

我只能使用“data-live-search”属性启用实时搜索，如下所示：

<select v-model="filterState" @change="search()" data-live-search="true" class="form-control" ref="stateSelect" id="stateSelect">

但我想在我的 JS 文件中设置选项而不使用数据属性。

我该怎么做？

标签： javascriptjqueryvue.jsbootstrap-4bootstrap-select

解决方案

v-for您需要绑定密钥的第一件事，请参阅文档以获得更好的解释。

第二个建议，如果可以的话，不要将 jquery 与 vue 混合使用，你不需要这样做，例如：

$(this.$refs.stateSelect).selectpicker('refresh');

可：

this.$refs.stateSelect.selectpicker('refresh'); // this can be wrong because selectpicker need a jquery object, but se the logic XD

我不太明白你的目的是什么，但我认为你可以使用手表挂钩：

watch: {
  filterstate(){//v-model of select
    $('.livesearch').selectpicker({
    liveSearch: true,
    noneSelectedText: 'Nichts ausgewählt',
});
  }
}

使用 vue 作为 ui，您可以使用bootstrap-vue或vuetify

推荐阅读