在 vuejs 中显示经过身份验证的用户

Question

我尝试在 laravel 5.3 和 vue 2.0 中遵循以下教程：

https://www.youtube.com/watch?v=CeXDx4hdT1s

Products.vue：

<my-product :key="product.id"
            v-for="product in products"
            :authenticatedUser="authenticatedUser"
            :product="product">

...

computed: {
  authenticatedUser() {
     this.$auth.getAuthenticatedUser()
  }
},

产品.vue：

export default{
    props: ['product', 'authenticatedUser']
}

Auth.js

setAuthenticatedUser(data){
  authenticatedUser = data;
},

getAuthenticatedUser(){
  return authenticatedUser;
}

Navbar.vue：

export default {
    data() {
        return {
            isAuth: null
        }
    },

    created() {
        this.isAuth = this.$auth.isAuthenticated();

        this.setAuthenticatedUser();
    },

    methods: {
        setAuthenticatedUser() {
            this.$http.get('api/user')
                    .then(response => {
                        this.$auth.setAuthenticatedUser(response.body);
                        console.log(this.$auth.getAuthenticatedUser());
                    })
        }
    }

我尝试传递在 Product.vue 中的 Products.vue 中调用的经过身份验证的用户

为此，在每次登录时，都会调用 Navbar.vue 中的 setAuthenticated 方法，其中应在相应方法中设置经过身份验证的用户。

但是当我在浏览器的调试器中检查该属性时，它写成 Props authenticatedUser: undefined。实际上没有显示经过身份验证的用户。

知道它缺少什么吗？

Answer 1

在computed 中，您需要return 您希望该属性采用的值。

应该是：

computed: {
  authenticatedUser() {
     return this.$auth.getAuthenticatedUser()
  }
},