vuejs undefined is not an object in v-for-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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>