14

我有需要身份验证的单页应用程序。当用户通过身份验证然后访问某些页面或点击浏览器中的重新加载按钮时，它将请求提供其身份验证数据的 api。然后我有一个这样的错误：

[Vue warn]: Error when evaluating expression "auth.name": TypeError: Cannot read property 'name' of null (found in component: <navbar>)

这个错误是因为 vue 渲染auth 数据而对 api 的请求还没有完成。

是否可以在 vue 渲染身份验证数据之前让 vue 等待请求 api 直到首先完成？

只是更清楚这里发生了什么。这是代码：

// main.js
import Vue from 'vue'
import App from './App.vue' // root vue
import store from './vuex/store' // vuex
import router from './router' // my router map

sync(store, router)
router.start(App, '#app')
// end main.js



// App.vue
<template>
  <main>
    <div class="wrapper">
      <router-view></router-view>
    </div>
  </main>
</template>

<script>
  import authService from './services/auth' // import authservice

  ready () {
    // here is code that should be done first before vue render all authData
    auth.getUser((response) => {
      self.authData = response
    })
  },
  data () {
    return {
      authData: null // default is null until the api finish the process
    }
  }
</script>
// end App.vue



// SomeRouterComponents.vue
<template>
  <!-- some content -->
  <div>
    // always got error: cannot read property 'name' of null
    // here I expect to render this after api has been resolved
    {{ $root.authData.name }}
  </div>
  <!-- some content -->
</template>
4

3 回答 3

14

正如您所说的问题是您尝试访问一个不存在的对象，并且由于错误，Vue 无法在下一个滴答中呈现它。解决方案是使用简单v-if的检查数据是否已加载，这仅适用于反应性数据。

根组件

  import auth from './services/auth' // import authservice

  ready () {
    // here is code that should be done first before vue render all authData
    auth.getUser((response) => {
      self.authData = response
      self.dataReady = true
    })
  },
  data () {
    return {
      authData: null, // default is null until the api finish the process
      dataReady: false
    }
  }

其他组件

  <div v-if="dataReady">
    // note that if you use v-show you will get the same error
    {{ $root.authData.name }}
  </div>
  <div v-if="!dataReady">
    // or some other loading effect
    Loading...
  </div>

我使用v-if="!dataReady"而不是v-else因为它将在 Vue 2.0 中被弃用

于 2016-06-09T19:54:47.597 回答
3

您可以使用启用data transition hook的选项：waitForData

<script>
  import authService from './services/auth'

  export default {
    route: {
      waitForData: true, // wait until data is loaded

      data (transition) {
        authService.getUser((response) => {
          transition.next({ authData: response }) // set data
        })
      }
    },

    data () {
      return {
        authData: null
      }
    }
  }
</script>

此外，如果您不想使用该选项，则可以使用该$loadingRouteData属性检查数据是否已加载。

更多细节在这里： http ://router.vuejs.org/en/pipeline/data.html

于 2016-06-10T05:04:47.617 回答
2

您可以阻止 Vue 尝试访问 object 属性，如下所示：

{{ $root.authData ? $root.authData.name : null }}

在某些情况下null，您甚至可以更改消息。Loading...

于 2016-06-10T02:19:53.167 回答