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

我的视窗像这样：

@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=“auth：：user（）”
如何在Vue组件上使用auth？

最佳答案

不能用这种方式在vue中使用laravel变量（php）。
您应该决定是要构建标准应用程序还是spa。
如果您想构建标准的多页应用程序，您可以将VueJS组件放置在php标记之间，就像您在第一个示例中所做的那样。
如果您仍然希望构建标准的多页应用程序，但能够使用Auth::user()值，那么在第5点中有一个选项供您选择。
将Auth::user()的值作为prop传递给vuejs组件。
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>
不确定如果你不需要把uth::Urter（）转换成String /int，但是我确信你会用PHP来解决。

关于authentication - 如何在vue组件上使用auth？ (Vue.JS 2)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42951976/