Question

我正在Vue中创建一个文件组件，该文件组件将一个对象作为名为data的道具。我想在我正在创建的自定义函数中访问此道具。这是我的代码

<script>
import { db } from "../main";

export default {
  name: "UserDetail",
  props: ["data"],
  methods: {
    verifyUserProfile: () => {
      console.log(this.data);
      db.collection("users")
        .doc(this.data.uid)
        .update({
          idProofVerified: true
        })
     }
  }
    };
</script>

当我在模板中使用数据道具时，它工作正常，但在函数中却给我Cannot read property 'data' of undefined错误。我在做什么错了？

更新：我在View内部使用此组件，如下所示：

  <div>
    <UserDetail :data="users[selected]" />
  </div>

用户是用户对象数组。

Answer 1

您正在使用() => {}，因此this指向全局上下文。将其替换为verifyUserProfile: function () { ... }。

Answer 2

您最有可能在道具到达组件之前调用该方法，通常props仅在生命周期方法之后才出现，因此，如果您调用试图访问它们的函数，则它将是未定义的。
一种解决方案是将观察者放在道具上，然后在道具收到值后触发功能。像这样：

watch: {
    data: {
       immediate: true, 
       handler(val){
         if (val){
             this.verifyUserProfile()
    }
}
}
}

无法访问道具内部方法

2 个答案: