Как ничего не отображать, когда ресурс не загружается из API в mustache в контексте vue.js

#javascript #vue.js #vue-component #mustache

#javascript #vue.js #vue-компонент #усы

Вопрос:

Я новичок в Vue, поэтому я хочу знать, как отображать пустой экран, когда ресурс не загружается из API. Итак, ниже приведен ус, который я использовал в своей программе, в котором переменная взята из API.

 <p class="text-2xl text-success">
    {{' '   avgSwing.overall_performance   '%'}}%
</p>

Таким образом, когда ресурс загружается из API, полученный результат:

  36.14%

когда ресурс не загружается из API, полученный результат:

  undefined%

Итак, я ожидаю пустой экран вместо undefined% , пожалуйста, помогите мне с этим. Спасибо.

1. Какой точный вывод HTML вы хотите получить?

2. На самом деле я привязываю данные из API, поэтому я хочу, чтобы символы отображались только тогда, когда данные выводятся из API.

Ответ №1:

Вы можете сделать это с v-if помощью условного отображения <p> только тогда, когда есть ответ от API:

 <p class="text-2xl text-success" v-if="avgSwing">
   {{ ' '   avgSwing.overall_performance   '%' }}
</p>

Если avgSwing не определено, <p> тег не добавляется в DOM.

Ответ №2:

Опубликованный вами код, {{' ' avgSwing.overall_performance '%'}} , безусловно, будет работать до тех пор, пока avgSwing.overall_performance он определен. Проверьте вывод на консоль, должна быть какая-то ошибка, если вы не видите вывод, окруженный и %.

Синтаксис mustache принимает любые допустимые выражения JavaScript только с определенными ограничениями.

1. Конечно, код работает, переменная, которую я использовал, взята из API, где я получаю желаемый результат только тогда, когда ресурсы загружаются из API, но когда ресурсы не загружаются из API, я получаю » неопределенный%», но я ожидаю ‘пустой’ вместо этого. Поэтому, пожалуйста, скажите мне, как это можно сделать