Vue：v-if如果“ TypeError：无法读取未定义的属性'length'”

Question

我有一个Rails 5.1.6 api，它为端点提供以下数据：

我正在尝试使用axios将Entities数据检索到Vue.js，但是到目前为止，尽管没有引发任何错误，但是该数据没有显示在视图中。以下是相关文件：

#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

我花了数小时试图找出我做错了什么，但是我找不到问题所在。任何帮助将不胜感激。

U 新错误 将初始化程序中的cors更新为：

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

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

，现在我得到了：

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

如果我不得不猜测，您的问题就在这里

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

response.data可能存在，但是response.data似乎不太可能具有名为entities的密钥。您没有在服务层做任何事情将response.data中的简单数组编组为entities。

也许像这样：

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

在任何情况下，此错误：

  

“ TypeError：无法读取未定义的属性'length'”

可能试图告诉您this.entities已分配给Vue组件内的undefined。解决这个问题。