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()
  }
},

Product.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：undefinded。实际上，未显示经过身份验证的用户。

任何想法都缺少什么？

Answer 1

在computed中，您需要return您希望酒店获得的价值。

应该是：

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

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

1 个答案: