在Bootstrap.vue中，在其他数组中显示不同数组的b表。

Question

我有一些数据想在b表中显示出来

对大多数数据都能正常使用，但是当我在引用的数组里面打出另一个数组时，就不能正常渲染了。

所以我被这个标记绊倒了

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

从bootstraps' 表格文件.

很好！不幸的是，我不能正确地将数据输出。

问题是数据包含不同类型的数组，这取决于使用的是什么。

"range": {
        "type": "point",
        "distance": {
           "type": "touch"
         }
},

还有...

"range": {
     "type": "point",
      "distance": {
       "type": "feet",
       "amount": 150
    }
},

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

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

所以我希望找到一个解决方案，就是做一个条件字段，检查数据是否可以到达，如果不可以，就不要显示任何东西。但我找不到任何答案或文档。

将distance.f feet包在v-if中还是会出错，然后不显示任何东西。

Answer 1

根据你的问题，你试图使用条件来显示数据，如果可用，否则你不想显示。

对于这一点，你只需要做如下

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