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>

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

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

我只能使用“data live search”属性启用livesearch，如下所示：

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

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

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

---

我如何才能做到这一点？

在您的

v-for

中的第一件事是您需要绑定密钥，请参阅以获得更好的解释

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

$（this.$refs.stateSelect）.selectpicker（'refresh'）

可以是：

this.$refs.stateSelect.selectpicker（'refresh'）；//这可能是错误的，因为selectpicker需要一个jquery对象，但是se需要逻辑XD

我不太明白你的目的是什么，但我想你可以用表钩：

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


使用vue作为ui，您可以使用或
在您的
v-for
中首先需要绑定一个键，请参阅以获得更好的解释

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

$（this.$refs.stateSelect）.selectpicker（'refresh'）

可以是：

this.$refs.stateSelect.selectpicker（'refresh'）；//这可能是错误的，因为selectpicker需要一个jquery对象，但是se需要逻辑XD

我不太明白你的目的是什么，但我想你可以用表钩：

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


使用vue作为用户界面，您可以使用或