如何在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: Cannot read property 'link' of null”

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

   "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

对于您的第一个问题，您可以在 <a> 标记上指定 v-if 以仅在 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>

---

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

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