javascript - 在 vue.js 中绑定(bind)时如何有效地显示文本而不是 null？

Question

在下面的代码中，site 可以为 null，但如果存在，则 company 不会为 null。当 site 为 null 时，如何有效显示“-”，并且可以很好地缩放 1000 行？

<tr v-for="obj in objs" :key="obj.id">
  <td>{{obj.site.company.name || "-"}}</td> <!-- does not work -->
</tr>

我可以制定一个方法来做到这一点:

methods: {
  handleNulls(obj) {
    // logic
    return "-";
  }
}

但如果可以内联完成或使用过滤器，那就更好了。

Answer 1

我建议使用内联if。您应该检查网站是否未定义以及公司是否未定义:

<tr v-for="obj in objs" :key="obj.id">
  <td>{{obj.site && obj.site.company ? obj.site.company.name : '-'}}</td>
</tr>