[Vuejs]-Making VueJS expressions debug-able

by

0👍

I think what you are looking for is ErrorBoundary. 

Vue.component('ErrorBoundary', {
  data: () => ({ error: null }),
  errorCaptured (err, vm, info) {
    this.error = `${err.stack}\n\nfound in ${info} of component`
    return false
  },
  render (h) {
    if (this.error) {
      return h('pre', { style: { color: 'red' }}, this.error)
    }
    // ignoring edge cases for the sake of demonstration
    return this.$slots.default[0]
  }
})

<error-boundary>
  <another-component/>
</error-boundary>

0👍

The first item in your v-for array is 0. The error states:

Cannot read property '0' of undefined

You’re attempting to access property 0 on people

people[d].name

Where do you have people defined?

The error is telling you an object is not defined, not an array.

Leave a comment