如何在vue组件上使用auth？ （Vue.JS 2）

Question

我的视图刀片是这样的：

@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>

它不起作用

存在这样的错误：

  

表达式无效：v-if =＆＃34; Auth :: user（）＆＃34;

如何在vue组件上使用auth？

Answer 1

1. 你不能以这种方式在你的Vue中使用Laravel变量（PHP）。
2. 您应该决定是否要构建标准应用或SPA。
3. 如果您想构建标准多页面应用程序，可以将VueJS组件放在PHP标记之间，就像在第一个示例中一样。
4. 如果您仍想构建标准的多页面应用，但能够使用Auth::user()值，则可以在第5点找到一个选项。
5. 将Auth::user()的值传递给VueJS组件作为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

我无法按照已接受的答案使auth用户对象正常工作（呈现无错误）：（

但是我可以像这样访问和传递诸如id之类的直接属性

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

请注意，它必须是“ v-bind”，因为它是动态属性，而不是显式字符串。

我也将它用作另一个替代方法，它也生成用户ID。

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

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