Как эффективно отображать текст вместо нуля при связывании в vue.js?

Question

В следующем коде site может быть нулевым, но если оно есть, company не будет нулевым. Как я могу эффективно отображать "-", когда site равно нулю, что хорошо масштабируется для 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.Вы должны проверить, является ли сайт 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>

Документация - условный рендеринг