In a Vuejs 3 component, the code below is functioning perfectly with no issues. However, I am looking to display something specific when there is no output:
<td> {{ $store.state.output[0].address }} </td>
If the above code is undefined or does not exist, I would like it to show '-' instead of an error.
<template>
<tbody class="text-center">
<tr class="table-default">
<th scope="row"> Origin </th>
<td> {{ $store.state.output[0].address }} </td>
<td> {{ $store.state.output[0].distance }} </td>
<td> {{ $store.state.output[0].fuelCost }} </td>
</tr>
<tr>
<th scope="row">1</th>
<td> {{ $store.state.output[1].address }} </td>
<td> {{ $store.state.output[1].distance }} </td>
<td> {{ $store.state.output[1].fuelCost}} </td>
</tr>
<tr>
<th scope="row">2</th>
<td> {{ $store.state.output[2].address }} </td>
<td> {{ $store.state.output[2].distance }} </td>
<td> {{ $store.state.output[2].fuelCost }} </td>
</tr>
<tr>
<th scope="row">3</th>
<td> {{ $store.state.output[3].address }} </td>
<td> {{ $store.state.output[3].distance }} </td>
<td> {{ $store.state.output[3].fuelCost }} </td>
</tr>
</tbody>
</template>
<script>
export default {
name: 'LineResultTable'
}
Is there a way in HTML to achieve this using v-if or v-show? I have been attempting to resolve this without success so far.