javascript - Vue JS $refs在挂载时未将类添加到元素classList

Question

我将 Vue JS 与 Laravel 和 Material Design Lite 一起使用。

如果我的表单在后端验证器失败，当我重定向时，我会向组件传递一个名为 的道具old，其中包含先前选择的选项。

我注意到，如果我在is-checked安装组件时尝试将类添加到标签中，它不会出现。例如

模板代码

...
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect pa" :ref="`option${option.id}`">
...

脚本代码

...
mounted(): {
    if(this.old){
        this.selectedOptions = JSON.parse(this.old);
        for(let id of this.selectedOptions){
            this.$refs[`option${id}`][0].classList.add('is-checked');
        }
    }
}
...

我觉得奇怪的是，当我将上面的脚本代码包装在一个setTimeout(()=>{...}, 1000)函数中时，它突然就起作用了。此外，以下代码也记录了正确的元素：

...
mounted(): {
    if(this.old){
        this.selectedOptions = JSON.parse(this.old);
        for(let id of this.selectedOptions){
            console.log(this.$refs[`option${id}`][0].classList);
        }
    }
}
...

标签： javascriptlaravelvue.js