Vue: v-if "TypeError: Cannot read property 'length' of undefined"

Question

I have a Rails 5.1.6 api that provides an endpoint with the following data:

I am trying to retrieve the Entities data to Vue.js with axios, but so far, though no errors are being thrown, the data is not showing in the views. Here are the relevant files:

#src/components/Entities.vue
<template>
  <div class="entities">
    <h1>Entities</h1>
    <div v-if="entities.length > 0" class="table-wrap">
      <div>
        <router-link v-bind:to="{ name: 'NewEntity' }" class="">Add Entity</router-link>
      </div>
      <table>
        <tr>
          <td>Title</td>
          <td width="550">Description</td>
          <td width="100" align="center">Action</td>
        </tr>
        <tr v-for="entity in entities">
          <td>{{ entity.title }}</td>
          <td>{{ entity.description }}</td>
          <td align="center">
            <router-link v-bind:to="{ name: 'EditEntity', params: { id: entity._id } }">Edit</router-link> |
            <a href="#" @click="deleteEntity(entity._id)">Delete</a>
          </td>
        </tr>
      </table>
    </div>
    <div v-else>
      There are no entities.. Lets add one now <br /><br />
      <router-link v-bind:to="{ name: 'NewEntity' }" class="add_entity_link">Add Entity</router-link>
    </div>
  </div>
</template>


<script>
import EntitiesService from '@/services/EntitiesService'
export default {
  name: 'entities',
  data () {
    return {
      entities: []
    }
  },
  mounted () {
    this.getEntities()
  },
  methods: {
    async getEntities () {
      const response = await EntitiesService.fetchEntities()
      this.entities = response.data.entities
    }
  }
}
</script>


#src/services/EntitiesService.js:

import Api from '@/services/Api'

export default {
  fetchEntities () {
    return Api().get('/entities')
  }

}

#src/services/Api.js

mport axios from 'axios'

export default() => {
  return axios.create({
    baseURL: 'http://localhost:3000'
  })
}



#Railsapp/config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

I have spent hours trying to see what I am doing wrong, but I can't locate the problem. Any help would be much appreciated.

U new error Updated cors in initializers to be:

Rails.application.config.middleware.insert_before 0, Rack::Cors do

    allow do
      origins '*'
      resource '/*', :headers => :any, :methods => :patch
    end
end

, now I am getting this:

vue.esm.js?efeb:591 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

found in

---> <Entities> at src/components/Entities.vue
       <App> at src/App.vue
         <Root>
warn @ vue.esm.js?efeb:591
logError @ vue.esm.js?efeb:1737
globalHandleError @ vue.esm.js?efeb:1732
handleError @ vue.esm.js?efeb:1721
Vue._render @ vue.esm.js?efeb:4546
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
run @ vue.esm.js?efeb:3219
flushSchedulerQueue @ vue.esm.js?efeb:2981
(anonymous) @ vue.esm.js?efeb:1837
flushCallbacks @ vue.esm.js?efeb:1758
Promise.then (async)
microTimerFunc @ vue.esm.js?efeb:1806
nextTick @ vue.esm.js?efeb:1850
queueWatcher @ vue.esm.js?efeb:3068
update @ vue.esm.js?efeb:3209
notify @ vue.esm.js?efeb:697
reactiveSetter @ vue.esm.js?efeb:1014
proxySetter @ vue.esm.js?efeb:3300
_callee$ @ Entities.vue?716d:47
tryCatch @ runtime.js?4a57:62
invoke @ runtime.js?4a57:296
prototype.(anonymous function) @ runtime.js?4a57:114
step @ asyncToGenerator.js?7b11:17
(anonymous) @ asyncToGenerator.js?7b11:28
Promise.then (async)
step @ asyncToGenerator.js?7b11:27
(anonymous) @ asyncToGenerator.js?7b11:35
F @ _export.js?90cd:36
(anonymous) @ asyncToGenerator.js?7b11:14
getEntities @ Entities.vue?716d:45
mounted @ Entities.vue?716d:42
callHook @ vue.esm.js?efeb:2921
insert @ vue.esm.js?efeb:4158
invokeInsertHook @ vue.esm.js?efeb:5960
patch @ vue.esm.js?efeb:6179
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
Vue._init @ vue.esm.js?efeb:4640
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main.js?1c90:10
./src/main.js @ app.js:1826
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:1859
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:1741 TypeError: Cannot read property 'length' of undefined
    at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-23d09f71","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Entities.vue (app.js:1661), <anonymous>:8:18)
    at VueComponent.Vue._render (vue.esm.js?efeb:4544)
    at VueComponent.updateComponent (vue.esm.js?efeb:2788)
    at Watcher.get (vue.esm.js?efeb:3142)
    at Watcher.run (vue.esm.js?efeb:3219)
    at flushSchedulerQueue (vue.esm.js?efeb:2981)
    at Array.eval (vue.esm.js?efeb:1837)
    at flushCallbacks (vue.esm.js?efeb:1758)`
    enter code here

Answer 1

I was getting the same error, this is how I solved the problem:

<div v-if="entities.length > 0 ? true : false" class="table-wrap"> <-----!

If you fix the code like this, it will work.

Answer 2

If I had to guess, your problem is here:

async getEntities () {
  const response = await EntitiesService.fetchEntities()
  this.entities = response.data.entities // 
}

response.data probably exists, but it seems unlikely that response.data has a key called entities. You're not doing anything in your service layer to marshal the simple array in the response.data into entities.

Maybe something like:

async getEntities () {
  const response = await EntitiesService.fetchEntities()
  this.entities = response.data // looks like your array is probably here 
}

In any case, this error:

"TypeError: Cannot read property 'length' of undefined"

is probably trying to tell you that this.entities has been assigned to undefined inside your Vue component. Fix that.