vuejs - bootstrap-select选项不起作用

Question

我有这个选择：

                <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“属性来启用livesearch，如下所示：

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

但我希望在不使用数据属性的情况下设置JS文件中的选项。

我该怎么做呢？

Answer 1

在您的v-for中，首先需要绑定一个密钥，请参阅doc以获得更好的解释。

第二个建议，如果可以的话，不要把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',
});
  }
}

对于ui，您可以使用bootstrap-vue或vuetify