Есть сайт, на нем модальное окно, к которому привязан Vue. И на окошке висит директива v-if
, которая изначально прячет окно, но при загрузке сайта, это окно рендерится, и через доли секунды прячется. Такая-же ситуация с полями типа {{ field }}
. Как это решить? Скрипт с vue лежит отдельно, а шаблон в основном файле.
-
Странно, что при v-if элемент рендерится. Может с условием что- то не так? Покажите код– Дмытрык18 мая 2019 в 5:58
-
Вопрос давно решен, смысл помечать как дубликат?– Алексей20 июл 2019 в 19:23
Добавить комментарий
|
1 ответ
Используйте директиву v-cloak
на корневом или дочернем элементе Vue приложения:
<div id="app" v-cloak>
<!-- -->
</div>
Эта директива останется на элементе до тех пор, пока связанный с ним экземпляр Vue не закончит компиляцию. --источник
К данной директиве можно применять привила css
для скрытия элемента как к обычному атрибуту.
[v-cloak] {
display: none;
}
// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false
Vue.config.devtools = false
new Vue({
el: '#app',
data: {
// Модель, отвечающая за
// отображение модального окна.
shownModal: false,
},
methods: {
toggleModal() {
this.shownModal = !this.shownModal
},
closeModal() {
this.shownModal = false
}
}
})
/*
Скрытие элемента по атрибуту.
Когда экземпляр будет готов,
этот атрибут будет удален.
*/
[v-cloak] {
display: none;
}
.modal {
position: relative;
max-width: 220px;
margin: 0 auto;
top: 25px;
padding: 0 15px 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
box-sizing: border-box;
}
<div id="app" v-cloak>
<button type="button" @click="toggleModal">Переключить окно</button>
<div class="modal" v-if="shownModal">
<p>Сообщение из модального окна</p>
<button type="button" @click="closeModal">Закрыть окно</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>