[英]Select2 in Vue conditional rendering using watcher
我有一个下拉(和其他输入),只有在用户选中了复选框时才需要显示。 为了保持用户界面清洁,它隐藏在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>
我最初在一个观察者上设置了这个设置,其overridePrice> 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()'
}
}
},
控制台日志按预期工作,但初始化不会。 这是一个错误还是我错过了关于Vue观察者/ JQuery / Select2的一些内容?
这可能是.overrideReason
在watch函数运行时不可用。 你可以使用$nextTick
watch: {
override: function(val){
if (val){
this.$nextTick(() => {
console.log("This will print");
$('.overrideReason').select2()'
})
}
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.