Mike_Ro
@Mike_Ro
Чистейший колумбийский ЖеЭс

Дефолтное значение, пока полностью не загрузился Vue?

Приветствую!

Имеется блок со стоимостью товаров в корзине, необходимо выводить 0, пока не подтянулись данные с ценой.

Из документации https://vuejs.org/guide/essentials/template-syntax.html

1. <div>{{ price }}</div> - видно выражение {{ price }}, пока не загрузился vue.
2. <div v-cloak>{{ price }}</div> - скрывается весь блок, пока не загрузился vue.

В инете нарыл еще один:

3. <div v-text="price">0</div> - в целом, все нормально, но пишет предупреждение [Vue warn]: Template compilation error: v-text will override element children (очевидно, я понимаю и планирую заменять 0).

[v-cloak] { display: none }

<div id="app">
  <div>{{ price }}</div>
  <div v-cloak>{{ price }}</div>
  <div v-text="price">0</div>
</div>


Как грамотно выводить дефолтное значение, пока не загрузился vue?
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Теоретически можно сделать как-то так:
<div id="app">
  <div v-cloak>{{ price }}</div>
  <div class="uncloak">0</div>
</div>

[v-cloak] { display: none }
[v-cloak] + .uncloak { display: block }
.uncloak { display: none }

но скорее всего будет немного моргать в момент переключения. Как-то так: https://codepen.io/FragsterAt/pen/wvXNYax
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы