如何在 vue 组件上使用 auth？ (Vue.JS 2)

Question

我的看法blade是这样的：

@if (Auth::user())
    <favorite :id="{{ $store->id }}"></favorite>
@else
    <a href="{{url('/login?red='.Request::path())}}" class="btn btn-block btn-success">
        <span class="fa fa-heart"></span>Favorite
    </a>
@endif

Auth::user() 有效

但是，当我像这样尝试 vue 组件时：

<template>
    ...
    <div v-if="Auth::user()">
        <favorite :id="item.id"></favorite>
    </div>
    <a v-else href="javascript:" class="btn btn-block btn-success">
        <span class="fa fa-heart"></span>Favorite
    </a>
    ...
</template>

<script>
    export default {
        props: ...
        computed:{
            ...
        },
        ...
    }
</script>

没用

存在这样的错误：

invalid expression: v-if="Auth::user()"

如何在 vue 组件上使用 auth？

Answer 1

您不能以这种方式在 Vue 中使用 Laravel 变量 (PHP)。
您应该决定是要构建标准应用还是 SPA。
如果您想构建标准的多页应用程序，您可以将 VueJS 组件放置在 PHP 标记之间，就像您在第一个示例中所做的那样。
如果您仍想构建标准的多页应用程序但能够使用您的 Auth::user() 值，第 5 点中有一个选项供您选择。
将 Auth::user() 的值作为 prop.

https://vuejs.org/v2/guide/components.html#Props

像这样使用道具：

props: ['auth'],
(...)
<template>
    ...
    <div v-if="auth">
        <favorite :id="item.id"></favorite>
    </div>
    <a v-if="!auth" class="btn btn-block btn-success"> // avoid using v-else as per VueJS docs
        <span class="fa fa-heart"></span>Favorite
    </a>
    ...
</template>

并在代码中使用您的组件，例如： <favorite :id="{{ $store->id }}" auth="Auth::user()"></favorite>

不确定您是否不必将 Auth::user() 强制转换为 string/int，但我很确定您会用 php.

解决这个问题

Answer 2

您可以使用 auth()->user() 而不是 Auth::user()

Answer 3

根据接受的答案，我无法让授权用户对象工作（无错误地呈现）:(

但我可以直接访问并传递属性例如 id

<example :auth="Auth::user()->id"></example >

注意它必须是 "v-bind" 因为它是一个动态属性而不是显式字符串。

我也把它作为另一种方法来工作，它也可以生成用户 ID。

auth="{{ Auth::check() }}"

我很想知道如何将对象传递到 vue 组件中？

如何在 vue 组件上使用 auth？ (Vue.JS 2)

How can I use auth on vue component ? (Vue.JS 2)

authentication

vue.js

vue-component

laravel-5.3

vuejs2