web-dev-qa-db-fra.com

Comment passer un PHP variable en instance de composant Vue dans la lame Laravel?

Comment puis-je transmettre une valeur d'une variable PHP à un composant Vue dans les fichiers lame Laravel?

Dans mon exemple, j'ai un modèle en ligne client-details, je reçois cette vue de Laravel et je souhaite maintenant transmettre la id qui vient avec l'url /client/1 à mon instance Vue.

Mon composant, chargé par Laravel, se présente comme suit:

<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 ça ne marche pas.

phplaravelvue.jsvuejs2
18
mastercheef85

Vous devez utiliser la variable props de Vue pour pouvoir transmettre des attributs aux composants de Vue via le balisage. Regardez l'exemple suivant:

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

Dans votre composant Vue:

Vue.component('client-details', {
    props: [
        {
            name: 'clientId',
            default:0,
        }
    ]
});

Désormais, dans d'autres parties de votre composant Vue, vous pouvez accéder à cette valeur en tant que this.clientId. 

Détails du problème

Veuillez noter qu'en HTML nous écrivons le nom de l'attribut dans kebab-case mais en côté Vue nous l'écrivons dans camelCase. Plus d'infos dans documents officiels ici .

En outre, vous utilisez le code v-bind de Vue dans :clientId="{{ $client->id }}", ce qui signifie que Vue traitera tout ce qui est entre guillemets comme une expression JavaScript. Par conséquent, vous risquez également de recevoir des erreurs dans ce cas. Au lieu de cela, vous devriez utiliser ce format clientId="{{ $client->id }} sans deux points.

28
Mustafa Ehsan

Pour tous ceux qui rencontrent ce fil et ont encore des erreurs, la réponse est correctement donnée ci-dessus par Mustafa Ehsan, mais elle n’explique pas. Les essais et les erreurs m'ont aidé à le voir. 

Mon composant dans 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ée. Sur le composant ci-dessus, j'ai écrit uniquement le nom de la liaison de données (comme React props), puis je l'ai enregistré sur les accessoires du composant (voir ci-dessous). Voici comment Mustafa a écrit sa reliure dans sa réponse et fonctionne bien. L’autre moyen, plus Vue, de transmettre les accessoires est avec v-bind: ou:, mais vous devez vous assurer d’utiliser les guillemets simples et les guillemets simples:

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

Sans les deux guillemets, vous obtenez des avertissements Vue. 

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>
0
Jonathan Whittle