web-dev-qa-db-fra.com

Passer PHP tableau en composant Vue à l'aide d'accessoires

  • Construire une application Laravel avec quelques composants Vue
  • Vous voulez passer un tableau PHP sur un composant Vue à l'aide d'accessoires

Voici un exemple d'un tel tableau PHP:

["Foo" => 100, "Bar" => 50]

Génial. Voici ma tentative de les transmettre au composant graphique:

<Chart points="{!! json_encode($points) !!}"></Chart>

Cela a l'air bien, mais les chaînes (Foo et Bar) dans le tableau $points sont encapsulées avec "(guillemets doubles) lors de l'utilisation de json_encode(). Cela signifie que chaque fois que la 1ère chaîne apparaît dans le tableau, le navigateur pense que le" est censé fermer l'attribut points.

Voici ce que vous obtenez de voir dans le navigateur:

<Chart points="{">Foo":100,"Bar":50}"</Chart>

Comment puis-je m'y prendre? Cela fait des heures que je me bats avec cela et je ne peux pas comprendre.

  • Impossible d'utiliser "(guillemets) car le navigateur l'interprète comme le guillemet de fermeture d'un attribut et gâche le code HTML.
  • Ne peut pas utiliser '(guillemets simples) car c'est un JSON invalide (et json_encode ne le supporte pas)
phparraysjsonlaravelvue.js
5
weakdan
<Chart points='{!! json_encode($points) !!}'></Chart>

Utilisez simplement des citations singulières.

4
Igor Q.

Bien que j'ai lu les réponses précédentes, cela m'a pris un certain temps pour travailler. Alors, voici ce qui fonctionne pour moi avec Laravel 5.5 et VueJs 2.5:

  1. Convertissez votre tableau PHP en une chaîne sérialisée JSON. 

    Pour les tableaux PHP, voir json_encode .
    Pour les collections Eloquent, voir la méthode Eloquent toJson .
    Pour référence ultérieure, nous appelons cette nouvelle chaîne JSON $arrayAsJSON.

  2. Dans votre vue (ou modèle de lame):

    <some-vue-component :componentProperty="{{ $arrayAsJSON }}"></some-vue-component>

  3. Le composant Vue:

    <template></template>

<script>
  export default {

    props: ['componentProperty'],

    mounted() {
        console.log('some-vue-component mounted.');
        console.log(this.componentProperty)
    },
  }
</script>
2
Didi

Peut utiliser de manière formelle:

<Chart points='<?php echo json_encode($points); ?>'></Chart>
1
Mohsen

À partir de Laravel 5.5, vous pouvez utiliser la directive @json.

<Chart points=@json($points)></Chart>

1
godbout