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

Question

[Михаил Р.]

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

Имеется блок со стоимостью товаров в корзине, необходимо выводить 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?

Comments

[zxf]

Может я не понял задачи, но почему не работает: <div>{{ price || 0 }}</div>?

Если price приводится к false, тогда шаблон отобразит 0, когда price сформируется из данных с ценой, то Vue поменяет его значение на эти данные. Важно только, чтобы price был реактивным, но это не проблема.

Answer 1

[Антон Антон]

Теоретически можно сделать как-то так:

<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

Comments

[Михаил Р.]

Получается, что необходимо выделять новый html элемент в каждом месте, где нужна дефолтная информация..? Предупреждение на этом фоне выглядит приятнее :)

[Антон Антон]

Михаил Р., ну можно поместить v-cloak на весь #app и нарисовать дефолтный макет под ним. Либо не макет, а заглушку-сплешскрин или какой-нибудь лоадер. При использовании sfc таких проблем нет.