Vue and data from REST API

Question

While playing around with vue.js I noticed some strange behavior while trying to display on a page data from an API, but here's the strange thing :

using vue 2.0.0, i can see the "Title", but I have an error in dev console [see printscreen]
using the latest vue version, i can't see the "Title" [and I have the same error in the printscreen]

Is it normal, or?

Source code :

  template:
    '<div>'+
      'Form with id = {{id}}'+
      '<br/>'+
      'has title = {{item.details.Title}}'+
    '</div>',
  data: function(){
    return {
      id: '',
      item: {}
    }
  },
  created: function() {
    this.get()
  },  
  methods: {
    get: function() {
      var self = this
      id = window.location.hash
      id = id.replace('#/whatever/','')
      axiosInstance.get('/thebackendresource/'+id) // <--- make http calls etc
        .then(function (response) {
          self.id = id
          self.item = response.data
          console.log(self.item)
        }).catch(function (error) {
          console.log(error)
        }
      );
    }
  }

Saurabh · Accepted Answer · 2016-12-04 14:21:13Z

2

You are getting this error, because when you are fetching data from axiosinstance, that time item.details is null, and when it tries to render it throws this error.

Once the api call is completed, it updates the the DOM and in turn re-renders the DOM, so you can see item.details.Title rendered.

You need to add a null check to prevent this error, which can be easily done using v-if, like follwoing:

template:
'<div>'+
  'Form with id = {{id}}'+
  '<br/>'+
  '<span v-if="item.details"> has title = {{item.details.Title}}'+
  '</span>' +
'</div>',

answered Dec 4, 2016 at 14:21

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cristi _b Over a year ago

I was hoping I could tweak this behavior from the component lifecycle, it's working

Collectives™ on Stack Overflow

Vue and data from REST API

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related