vuejs undefined is not an object in v-for - vue.js

Question

I'm receiving a response from an api with data and would like to show the results with vuejs in a table. This works fine, until some parameters a missing.
So how can I skip the whole row in v-for, when e.g this {{ sp . article_data . desc_de }} is undefined?
Or how can I show the results except the values which are empty / null?
Backgrund information: When there's a conflict with incomplete data, then the sp.article object is completely missing. Parameters like {{ sp . name }} or {{ sp . type }} are always available.

Answer 1

There are so many possibilities:
Use v-if to display data conditionally
filter the unwanted rows in a computed property
use optional chaining to cope with missing data

Answer 2

As you said, In some cases whole article object will be missing. In this case you can use Optional chaining (?.) which enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
In below Demo, article object is missing from the 4th object and for undefined/null values, It is showing an empty cell.
Demo :
new Vue({
el: '#app',
data: {
spData: [{
id: 1,
name: 'Alpha',
type: 'Type 1',
article: {
desc_de: 'abc'
}
}, {
id: 2,
name: 'Beta',
type: 'Type 2',
article: {
desc_de: undefined
}
}, {
id: 3,
name: 'Gamma',
type: 'Type 3',
article: {
desc_de: 'def'
}
}, {
id: 4,
name: 'Delta',
type: 'Type 4'
}]
}
})
table, td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Article</th>
</tr>
<tr v-for="sp in spData" :key="sp.id">
<td>{{ sp.name }}</td>
<td>{{ sp.type }}</td>
<td>{{ sp.article?.desc_de }}</td>
</tr>
</table>
</div>
Now, If you want to remove whole row if any of the column value is empty. Then, you can achieve that by simply applying the Array.filter() method while iterating.
v-for="sp in spData.filter(x => x.article && x.article.desc_de)"
Demo :
new Vue({
el: '#app',
data: {
spData: [{
id: 1,
name: 'Alpha',
type: 'Type 1',
article: {
desc_de: 'abc'
}
}, {
id: 2,
name: 'Beta',
type: 'Type 2',
article: {
desc_de: undefined
}
}, {
id: 3,
name: 'Gamma',
type: 'Type 3',
article: {
desc_de: 'def'
}
}, {
id: 4,
name: 'Delta',
type: 'Type 4'
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Article</th>
</tr>
<tr v-for="sp in spData.filter(x => x.article && x.article.desc_de)" :key="sp.id">
<td>{{ sp.name }}</td>
<td>{{ sp.type }}</td>
<td>{{ sp.article?.desc_de }}</td>
</tr>
</table>
</div>