Блог

Я разделяю блоки с v-if помощью-оператора, такого как:

 <div v-if="resp > 1023">
    <PdfViewer />
</div>

<div v-else>
    <PdfViewer />
</div>
 

Проблема, с которой я столкнулся, заключается в том, что при просмотре на экране меньшей ширины PDFViewer отображается один раз. При ширине более 1023 пикселей он отображается два раза, даже если второе упоминание о нем находится в блоке if-else. Другие html — элементы внутри него не отображаются, но компонент есть.

Соотв. — ширина экрана при монтировании:

     mounted() {
        this.resp = window.innerWidth;
        console.log(this.resp);
    }
 

Я решил эту проблему, присвоив значение в созданном крючке жизненного цикла, поэтому значение устанавливается до оценки v-if.

 created() {
    this.resp = window.innerWidth;
    console.log(this.resp);
}