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

Question

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

<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

我会建议一个 inline 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 2

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

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>

Answer 3

尝试这个 ：

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

文档 - 条件渲染