Vue 在使用前等待来自 props 的数据

Question

我一直遇到一个问题，我正在等待来自道具的数据在我创建的钩子内做一些事情。它不断抛出错误，例如“this.value is not defined”（因为它还没有从 prop 加载）

我已经使用v-if并且仅在需要时使用修复了其中的一些问题。但是，在某些情况下，我想在我的创建中使用该道具信息，当发生这种情况时，我最终会收到错误，并且不确定如何最好地告诉创建的那部分在运行之前“等待”数据。

有什么建议吗？

——

更新以添加一些示例代码。

在 App.js 页面上，我正在调用“userInfo”并将其设置为这样的数据。我这样做有两个原因。首先检查用户是否登录，其次花时间保存用户信息，因为它将在以后在整个应用程序中使用。（请注意，user 和 userInfo 是不同的，包含不同的信息。用户是电子邮件/密码，而 userInfo 是用户名、生物等。）

data() {
  return {
    user: null,
    userInfo: null,
  }
},
created(){
//let user = firebase.auth().currentUser
  firebase.auth().onAuthStateChanged((user) => {
    if(user){
      this.user = user
      let ref = db.collection('users')
      .where('user_id', '==', this.user.uid)
      ref.get().then(snapshot => {
      snapshot.forEach(doc => {
        this.userInfo = doc.data()
      })
    })

    } else {
      this.user = null
    }
  })
},

现在，我在 using v-bind 中传递这些信息。然后使用道具在我需要一些信息的区域调用它。

当我想做一些事情时就会出现问题，例如 -

if(this.userInfo) {
  value = true  
}

调用 this.userInfo 会抛出错误“this.userInfo is null”（我在页面的 data() 中将其设置为 null 作为默认值）。

Answer 1

正如评论中已经提到的，您遇到了 Promise 解决问题。当将结果作为由 Promise 解析的 Prop 传递时，该结果基本上是空的，最终会导致您的 Child Componentscreated()钩子出错。

我建议使用v-if您在子组件本身中已经完成的操作。但是，我会v-if在父组件中使用 来简单地显示/隐藏子组件。这不仅应该解决您的created()钩子中的问题，而且还有助于在您的子组件中建立一个更具可读性的标记，您可以在其中删除所有v-ifs。

因此，让我们假设您有这样的父/子关系。

<SomeParentComponent>
  <SomeChildComponent :someProp="yourProp" />
</SomeParentComponent>

当yourProp一个解决的承诺后设定，初始值会null，undefined或任何你已经将它设置为。为了避免传入一个空的 prop，你可以将 the 包裹在 a v-ifwhich 的表达式中，yourProp就像这样。

<SomeParentComponent>
  <SomeChildComponent :someProp="yourProp" v-if="yourProp" />
</SomeParentComponent>                           <!-- ^-- See here -->

这样做， Child 只会在yourProp设置时呈现，因此您不会再收到任何错误。

Answer 2

接受的答案提供了一个很好的解决方案，它v-if在父组件中设置整个子组件。然而，仍然存在一些边缘情况，如果 API 返回这样的值，您的 prop 就会真正变为空或 null，最终根本不会渲染您的子组件，尽管您可能需要显示一些默认文本/样式，或者也许您正在处理有些项目您无法控制父组件。在这些情况下，您可以通过检查该 prop 是否已在创建的钩子中可用来在内部处理此问题，如果不可用，您应该动态监视该 prop 直到它可用。

// your component
export default {
  props: ['userInfo'],

  created() {
    // check if the prop userInfo available or not
    if (this.userInfo) {
      // do your thing
    } else {
      // start watching this prop
      const unwatch = this.$watch('userInfo', () => {
        // do your thing when userInfo is available

        // tear down this watcher as you now no longer need it
        unwatch()
      })
    }
  }
}