如何在Vuejs中的v-for中绑定锚标记中的空值和空元素

Question

我有一张像这样的桌子：

我在这里面临两个困难：

1. 我有一个文档链接，它在创建表单中不是必填字段，因此通过响应传入的数据有时具有空值，这会引发错误并使表数据消失。我正在尝试实现这样的东西

   <td class="text-center"> <a :href="item.document.link" target="_blank"> <i class="fa fa-eye text-navy"></i> </a> </td>

这会引发错误：

[Vue 警告]：渲染函数出错：“TypeError：无法读取 null 的属性‘链接’”

2. 我有两列用于旧的和修订的目标价格，在创建数据集期间只插入一个目标价格，发送数据的响应在一个变量中，如下所示：

   "target_prices": [ {"id":3,"research_id":16,"price":"90"} {"id":4,"research_id":16,"price":"91"} ]

所以在这种情况下，里面可能只有一个数据target_price：

"target_prices":
[
    {"id":3,"research_id":16,"price":"90"}
]

这使表格移动，因为您可以在图像中看到表格正在移动，我使用一个简单的v-for循环来显示值。

<td class="text-center" v-for="target in item.target_prices">{{ target.price }}</td>

Old如果只有一个值可用，我只想在下面显示 null 或 NA 。并在 TP 中显示两者的差异 帮我解决这个问题。谢谢。

Answer 1

对于您的第一个问题，您可以v-if在<a>标签上指定 a以仅在item.document退出时呈现它：

<td class="text-center">
  <a v-if="item.document" :href="item.document.link" target="_blank">
    <i class="fa fa-eye text-navy"></i>
  </a>
</td>

对于您的第二个问题，您可以检查<template>标签中数组的长度，如果数组中只有一个元素，则可以item.target_prices通过v-ifand显示不同的模板v-else：

<template v-if="item.target_prices.length === 1"> 
  <td class="text-center"> N/A </td>      
  <td class="text-center">{{ item.target_prices[0].price }}</td>
</template>
<template v-else>
  <td class="text-center" v-for="target in item.target_prices">
    {{ target.price }}
  </td>
<template>