Twitter bootstrap 在Bootstrap.vue中的其他阵列中显示具有不同阵列的b表

我有一些数据要显示在b表中

它适用于大多数数据，但当我在引用的数组中点击另一个数组时，它无法正确渲染

所以我被这个标记绊倒了

<template v-slot:cell(name)="data">
   <b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first}}</b>
</template>

及

所以我可以很容易地检索类型变量，因为它总是在那里，但是如果存在distance.type和distance.amount，我也希望显示它。不幸的是，这会导致一个错误-因为有时它不包含金额

<b-table striped hover :items="spells">
   <template v-slot:cell(range)="rangeData">
      <b class="text-info">
         {{rangeData.item.range.distance}}, <--- this displays the content of the problematic array
         {{rangeData.item.range.distance.feet}}, <-- this causes undefined errors and fails to load
         {{rangeData.item.range.type}}  <--- this displays properly
     </b>
   </template>
</b-table>

{{rangeData.item.range.distance}，根据您的问题，您正在尝试使用条件来显示数据（如果可用），否则您不想显示

为此，您只需执行以下操作-

<b class-"text-info">
   {{rangeData.item.range && rangeData.item.range.distance ? rangeData.item.range.distance: "" }},
   {{rangeData.item.range && rangeData.item.range.distance && rangeData.item.range.distance.feet ? rangeData.item.range.distance.feet: "" }},
   {{rangeData.item.range && rangeData.item.range.type ? rangeData.item.range.type: "" }}
</b>


{{rangeData.item.range&&rangeData.item.range.distance？rangeData.item.range.distance:”}，
{{rangeData.item.range&&rangeData.item.range.distance&&rangeData.item.range.distance.Foots？rangeData.item.range.distance.Foots:“}，
{{rangeData.item.range&&rangeData.item.range.type？rangeData.item.range.type:“}”
{{rangeData.item.range.distance.feet}}，是否正确？我认为它应该有{rangeData.item.range.distance.type}，类型显示，因为它总是在那里-但这不是我要寻找的值。我爱你。这一天我都快发疯了。
<b-table striped hover :items="spells">
   <template v-slot:cell(range)="rangeData">
      <b class="text-info">
         {{rangeData.item.range.distance}}, <--- this displays the content of the problematic array
         {{rangeData.item.range.distance.feet}}, <-- this causes undefined errors and fails to load
         {{rangeData.item.range.type}}  <--- this displays properly
     </b>
   </template>
</b-table>

<b class-"text-info">
   {{rangeData.item.range && rangeData.item.range.distance ? rangeData.item.range.distance: "" }},
   {{rangeData.item.range && rangeData.item.range.distance && rangeData.item.range.distance.feet ? rangeData.item.range.distance.feet: "" }},
   {{rangeData.item.range && rangeData.item.range.type ? rangeData.item.range.type: "" }}
</b>