Comment passer une variable PHP à Vue instance de composant dans Laravel lame?

Comment puis-je passer de la valeur d'une variable PHP à une Vue de composant dans Laravel lame de fichiers?

Dans mon exemple, j'ai une ligne modèle client-détails, je reçois ce point de vue, Laravel alors maintenant, je veux passer la id qui vient avec l'url /client/1 à mon Vue instance.

Mon élément, qui est chargé par Laravel, ressemble:

<client-details inline-template>
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

et monté par:

Vue.component('client-details', {
    data(){
        return {
            clientId: null
        }
    },
);

J'ai déjà essayé comme

:clientId="{{ $client->id }"

mais il ne fonctionne pas.

InformationsquelleAutor mastercheef85 | 2017-01-07

28

Vous devez utiliser la Vue du props pour être en mesure de passer des attributs de Vue de composants par le biais de balisage. Jetez un oeil à l'exemple suivant:
```
<client-details inline-template client-id="{{ $client->id }}">
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>
```
Dans votre Vue de composant:
```
Vue.component('client-details', {
    props: [
        {
            name: 'clientId',
            default:0,
        }
    ]
});
```
Maintenant dans d'autres parties de votre Vue de composant, vous pouvez accéder à cette valeur comme this.clientId.

Question De Détails

Veuillez noter qu'en HTML nous écrire le nom de l'attribut dans kebab-cas mais en Vue de côté, nous de l'écrire dans camelCase. Plus d'infos dans officiel docs ici.

Aussi, vous êtes à l'aide de Vue de l' v-bind abréviation dans :clientId="{{ $client->id }}" ce qui signifie que la Vue s'occuper rien à l'intérieur de guillemets doubles comme une expression JavaScript, donc vous pouvez obtenir des erreurs dans ce cas. Au lieu de cela, vous devez utiliser ce format clientId="{{ $client->id }} sans un colon.
- je vous remercie beaucoup.
- Tout changement à ce sujet? Je suis arriver "[Vue avertir]: les accessoires doivent être des chaînes de caractères lors de l'utilisation de la syntaxe de tableau" erreur. Modifié: Résolu par le remplacement des accessoires: ["clientId"]
- Ce n'est pas un code valide: <client-details inline-template client-id="{{ $client->id }}">, vous ne pouvez pas passer une variable PHP juste comme ça
- pouvez-vous veuillez donner des précisions?
- l'OP a utilisé un laravel tag, évidemment {{ $client->id }} est une syntaxe utilisée par laravel est lame modèle de moteur et l'hypothèse est faite ici, il tout à fait correct.
InformationsquelleAutor Mustafa Ehsan
9

J'ai juste fait ça et c'est génial de travailler pour moi. À l'aide de Laravel 5.4 et Vue 2.x.

Dans mon composant, déclarer une propriété (accessoires) pour l'objet:

props: ['currentUser'],

Sur ma lame de la page où le composant est instancié:

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

Noter que dans le composant, je suis en utilisant camelCase pour currentUser, mais parce que le html est insensible à la casse, vous devez utiliser kebab-cas (ainsi, le "courant" l'utilisateur").

Également noter que si vous utilisez la lame de la syntaxe {{ }} les données entre est exécuté par le biais de php htmlspecialchars. si vous voulez non codée des données (dans ce cas), puis utilisez {!! !!}

InformationsquelleAutor Hawkeye64

Pour toute personne qui découvre ce fil et est encore d'avoir des erreurs, la réponse est correctement donnée ci-dessus par Mustafa Ehsan, mais qui n'est pas expliqué. D'essai et d'erreur m'a aidé à voir.

Mon composant newuser.blade.php

<access-request
       firstname="{{ $newuser->firstname }}"
       lastname="{{ $newuser->lastname }}"
       accessid="{{ $newuser->id }}"
>
</access-request>

Il est très important de noter la méthode de reliure utilisés. Sur le composant ci-dessus, j'ai écrit que le nom de la liaison de données (comme Réagir accessoires), puis enregistré sur le composant d'accessoires (voir ci-dessous). C'est de cette façon Mustafa a écrit sa liaison, dans sa réponse, et fonctionne très bien. L'autre, plus Vue façon de transmettre les accessoires est avec le v-lier: ou :, mais vous avez à faire assurez-vous d'utiliser à la fois des guillemets doubles et les guillemets simples:

:firstname="'{{ $newuser->firstname }}'"

Sans à la fois des devis, vous obtenez la Vue des avertissements.

AccessRequest.vue:

<template>
   <div class="component">
        <h3 class="">{{ firstname }} {{ lastname }}</h3>
        <p>Access ID: {{ accessid }}</p>
        <label for="administrator">Grant Administrator Priviledges:</label>
        <input name="administrator" type="checkbox" value="True" class="mb-5"><br>
        <button type="submit" class="btn btn-success">Add</button>
        <button type="submit" class="btn btn-danger">Delete</button>
        <hr>
   </div>
</template>

<script>
  export default {
    name: "AccessRequest",
    props: ['firstname', 'lastname', 'accessid'],
  }
</script>

InformationsquelleAutor Jonathan Whittle

-1

J'ai dû passer quelques données de serveur à ma Vue composant, j'ai fini par créer un $server_data variable dans le contrôleur, et en le passant dans un json balise de script.

Dans le contrôleur:
```
$server_data = json_encode([
    "some-data" => SomeObject::all()
]);

return View::make('myview', compact('server_data'));
```
Dans le modèle:
```
<script type="application/json" name="server-data">
    {{ $server_data }}
</script>

<script>
    var json = document.getElementsByName("server-data")[0].innerHTML;
    var server_data = JSON.parse(json);
</script>
```
Dans la vue de l'initialisation, j'ai mis une propriété calculée:
```
computed: {
    'server_data': function(){
        return window.server_data;
    }
}
```
Ensuite, les données sont accessibles dans le modèle de composant avec server_data.some_object.

Cela permet de passer beaucoup de données structurées, sans avoir besoin de nombreux attributs html. Un autre avantage est que les données sont échappés par la l'encodage json. Cela évite les éventuels bugs avec les variables qui contiennent des guillemets doubles ("), qui serait gâcher le dom.

InformationsquelleAutor antoineMoPa

Vous devez vous connecter pour publier un commentaire.