Как избавиться от мелькания при загрузке элементов, скрытых с помощью v-if?

Question

[Николай Чуприк]

Есть несколько div, которые изначально скрыты примерно так:

<div v-if="(on)">
где переменная on=false с самого начала:

Vue ({
    data: on=false
});

При этом при загрузке страницы этот элемент div на которое врем виден на экране. Я конечно могу его в CSS сделать сначала display:none, а потом уже "расчехлить", но не хочется усложнять. Да и хочу понять причину, почему сейчас плохо работает.

Answer 1

[Vitaliy]

Шаблон должен быть не в .html (который загружается раньше, чем инициализируется Vue), а в template свойстве создаваемого компонента

Vue.component('comp', {
template: '...'
});

который вызывается в render экземпляра Vue

new Vue({
el: '#app'
});

.html
<div id="app"><comp></comp></div>

Comments

[Николай Чуприк]

Спасибо. Так и поступим.

Сборку не использую, а писать шаблон сразу в HTML, сами понимаете, приятнее.

[Vitaliy]

Николай Чуприк, приятнее было бы писать в .vue файлах через редактор с расширением для Vue (VS Code например), со сборщиком, естественно, хотя через Vue-cli он скрыт внутри, так что остается только установить и пользоваться

Answer 2

[hopeful_romantic]

https://medium.com/vuejs-tips/v-cloak-45a05da28dc4

Answer 3

[Roman K]

Во-первых, если элемент скорее всего будет виден на странице рано или поздно — его лучше скрыть v-show, это легче, чем перестраивать DOM;
Во-вторых, если он мелькает — значит флаг его показа часто меняется;
В-третьих, можно использовать transition/transition-group, чтобы он не "мелькал".

Comments

[Николай Чуприк]

Спасибо за советы, но не то. Речь о первичном рендеринге, когда сразу условие показа false.

[Roman K]

Николай Чуприк, а, ты просто не говорил, что у тебя не однофайловые компоненты.