如果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

正如Adriano所指出的，Vue Instance Lifecycle在这里起作用。首次创建DOM时，记录数据尚未初始化，这意味着!records.length将返回true。为了避免这种情况的发生，请初始化records挂钩中的created()数据。这样，将在呈现DOM之前收集数据，因此，如果records中有值，则不会显示错误消息。