Как показать предупреждение при загрузке, если пусто vuejs2 v-for?

Question

Я ищу отображение предупреждения о загрузке, если v-for не возвращает строку, оно появляется с v-if = "! Records.length", но проблема в том, что предупреждение всегда отображается при загрузке страницы!

<tbody>
 <tr v-for="record of records" :key="record.id">
  <td class="text-nowrap">{{ record.last_name }} {{ record.first_name }}</td>
  <td class="text-nowrap">{{ age(record) }}</td>
 </tr>
</tbody>
<div v-if="!records.length" id="errorMsg" class="alert alert-danger text-center" role="alert">
     nothing to show !
</div>

Answer 1

Как указал Адриано, здесь вступает в игру жизненный цикл Vue Instance .Когда DOM создается впервые, данные записей еще не были инициализированы, что означает, что !records.length вернет true.Чтобы этого не происходило, инициализируйте данные records в хуке created().Таким образом, данные будут собраны до визуализации DOM, поэтому сообщение об ошибке не будет отображаться, если в records есть значения.