使用观察程序在Vue条件渲染中选择2

Question

我有一个下拉列表(和其他输入(，只有在用户选中复选框时才需要显示。为了保持UI干净，它隐藏在v-if:后面

<input type="checkbox" id="override" name="override" v-model="override"/>
<div v-if="override">
<input type="number" name="overridePrice" v-model="overridePrice"/>
<select class="overrideReason" name="overrideReason" id="overrideReason">
<option v-for"res in override_reason" :value="res.id">{{ res.text }}</option>
</select>
</div>

我最初在一个观察者身上设置了这一设置，因为价格>0，这很有效：

watch: {
overridePrice: function(val){
if(val>0){
$('.overrideReason').select2();
}
}
},

然而，无论值是0还是更大，都需要下拉列表，所以我认为将其更改为关注布尔值也同样容易，但它不起作用，select2没有正确初始化，我只剩下标准的HTML下拉列表：

watch: {
override: function(val){
if (val){
console.log("This will print");
$('.overrideReason').select2()'
}
}
},

控制台日志按预期工作，但是初始化没有。这是一个bug，还是我遗漏了Vue观察者/JQuery/Select2的一些内容？

Answer 1

这可能是.overrideReason在watch函数运行时不可用。您可以使用$nextTick

watch: {
override: function(val){
if (val){
this.$nextTick(() => {
console.log("This will print");
$('.overrideReason').select2()'
})
}
}
},