在 vue.js 中绑定时如何有效地显示文本而不是空值？

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

试试这个：

<tr v-for="obj in objs" :key="obj.id">
  <td v-if="obj.site !== null">{{obj.site.company.name}}</td>
  <td v-else>-</td>
</tr>

Documentation - conditional rendering

Answer 2

我建议使用内联 if。您应该检查站点是否为 undefined 以及公司是否为 undefined:

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

Answer 3

您想在网站不可用时显示“-”，所以我这样做了：（数组的第一个元素为空）

let app;


function appInit(){
 app = new Vue({
  el:'#app',
  data:{
   obj:[
    null,
    {site:{company:{name:"test2"}}},
    {site:{company:{name:"test3"}}}
   ]
  }
 });
}

appInit();

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="item in obj">{{item && item.site && item.site.company&& item.site.company.name ? item.site.company.name : " - "}}
    </li>
  <ul>
<div>

在 vue.js 中绑定时如何有效地显示文本而不是空值？

How to efficiently display text instead of null when binding in vue.js?

html

javascript

data-binding

null-coalescing

vue.js