Alternative way of handling undefined ajax data

Question

Something I have never truly understood in Vue is how one should tackle the issue with undefined "network/async keys".

Give the example below:

<template>
  <div>
    <h1>{{row.something_undefined_before_ajax_returns.name}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      row: {}
    }
  },
  created() {
    axios.get('.../row/12')
      .then(response => {
        // response = {data: {something_undefined_before_ajax_returns: {name: 'John Doe'}}}
        this.row = response.data
     })
  }
}
</script>

This would return in a console warning of: [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined". However, the h1 will finally display John Doe once Vue registered the async changes.

However, the way I have coped with this 'til now is to simply define the expected key in the js like so:

<script>
export default {
  data() {
    return {
      row: {
        something_undefined_before_ajax_returns: {}
      }
    }
  },
  ...
}
</script>

By doing that, Vue does not throw a warning as expected. However, this does work in the short term, but once the return data from the HTTP calls gets a bit more complex and nested, this feels really pointless having to define all the possible outcomes.

Is there a way to tell Vue to ignore such warnings until the call has been received?

Bhojendra Rauniyar · Answer 1 · 2018-11-27T12:58:46.460

1

You can simply use v-if:

<h1 v-if="row">{{row.something_undefined_before_ajax_returns.name}}</h1>

And you may also check row property:

<h1 v-if="row && row.something_undefined_before_ajax_returns">
 {{row.something_undefined_before_ajax_returns.name}}
</h1>

Sorry, I din't notice that row is an object, to check it you may use like:

v-if="Object.keys(row).length"

But I don't think you need to check for object but its property, so you can do just:

v-if="row.something_undefined_before_ajax_returns"

edited Nov 27 '18 at 12:58

answered Nov 27 '18 at 09:59

Bhojendra Rauniyar

83,432
35
168
231

I guess this could work indeed. You're thinking of defining row as null instead of as an empty object I suppose? – Sølve T. Nov 27 '18 at 12:03
Well, I mean. This does work ^^ However, the issue with checking for properties is that if you're working with deeply nested data, this will pollute the dom really much if one have to check per property downward until you get the right child. Example: `v-if="row.something && row.something.one && rown.something.one.two && row.something.one.two.three"`... you see where I'm going – Sølve T. Nov 27 '18 at 13:25
This is basically what I'm trying to avoid. However, as you said first-ish: If we instead of defining the "root object" row to an empty object, we could define it as `null` and assume it having all data if it is not null. `v-if="row" ...access childs here` – Sølve T. Nov 27 '18 at 13:28
1

Umm, you may find this helpful then: https://stackoverflow.com/questions/52633568/how-to-handle-calling-functions-on-data-that-may-be-undefined/52633611#52633611 – Bhojendra Rauniyar Nov 27 '18 at 13:28

Alternative way of handling undefined ajax data

1 Answers1