2017-03-22 5 views
0

Meine Ansicht Klinge wie folgt aus:Wie kann ich Auth auf Vue-Komponente verwenden? (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() arbeitet

Aber, wenn ich auf vue Komponente wie diese versuchen:

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

Es spielt funktioniert nicht

Es gibt einen Fehler wie diesen:

ungültiger Ausdruck: v-if = "Auth :: Benutzer()"

Wie kann ich Auth auf vue Komponente verwenden?

+0

Sie bauen SPA oder Standard-Multi-Seite-App? Es gibt keine Möglichkeit, reines Laravel-Material direkt in die '.vue'-Komponente für einzelne Dateien zu übertragen –

+0

@Belmin Bedak, Als ob ich es nicht verwende –

+0

Ich bin froh, dass es geholfen hat! –

Antwort

1
  1. Sie können auf diese Weise Laravel-Variablen (PHP) nicht in Ihrem Vue verwenden.
  2. Sie sollten entscheiden, ob Sie Standard-App oder SPA erstellen möchten.
  3. Wenn Sie eine Standard-Mehrseiten-App erstellen möchten, können Sie Ihre VueJS-Komponenten genau wie im ersten Beispiel zwischen PHP-Tags platzieren.
  4. Wenn Sie noch Standard-Multipage App aufbauen wollen aber in der Lage sein, Ihren Auth::user() Wert zu verwenden, gibt es eine Option für Sie in Punkt 5.
  5. Pass Wert von Auth::user() zum VueJS Komponente als Stütze.

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

Verwenden Sie die Stütze wie folgt aus:

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> 

und Ihre Komponente im Code verwenden wie: <favorite :id="{{ $store->id }}" auth="Auth::user()"></favorite>

Nicht sicher, ob Sie Auth nicht werfen müssen :: user() to string/int, aber ich bin mir ziemlich sicher, dass Sie es mit PHP herausfinden werden.

0

können Sie auth()->user() anstelle von Auth::user()

Verwandte Themen