使用Watcher在Vue条件渲染中执行Select2

时间:2018-12-03 01:30:28

标签: javascript jquery vue.js jquery-select2

我有一个下拉列表(和其他输入),仅在用户选中复选框时才需要显示。为了保持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>

我最初在观察者上设置了这个功能,使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 watchers / JQuery / Select2的信息?

1 个答案:

答案 0 :(得分:1)

这可能是.overrideReason在运行监视功能时不可用。您可以使用$nextTick

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