web-dev-qa-db-ger.com

Bestehen PHP Array auf Vue-Komponente mit Requisiten

  • Erstellen einer Laravel-App mit einigen Vue-Komponenten
  • Möchten Sie ein PHP - Array mithilfe von Requisiten an eine Vue-Komponente übergeben

Hier ist ein Beispiel eines solchen PHP Arrays:

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

Großartig. Hier ist mein Versuch, sie an die Chart-Komponente zu übergeben:

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

Das sieht gut aus, aber die Strings (Foo und Bar) innerhalb des $points-Arrays werden mit "(Anführungszeichen)" gekapselt, wenn json_encode() verwendet wird. Dies bedeutet, dass der Browser bei Auftreten der ersten Zeichenfolge im Array glaubt, dass das "Schließen" geschlossen wird das points-Attribut.

Im Browser sehen Sie Folgendes:

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

Wie gehe ich vor? Ich habe jetzt stundenlang damit zu kämpfen, und ich kann meinen Kopf nicht darum wickeln.

  • "Kann nicht verwendet werden" (doppelte Anführungszeichen), da der Browser es als Schlusszitat für ein Attribut interpretiert und den HTML-Code durcheinander bringt
  • Kann nicht verwendet werden (einfache Anführungszeichen), da dies ungültig ist (und Json_encode unterstützt es nicht).
5
weakdan
<Chart points='{!! json_encode($points) !!}'></Chart>

Verwenden Sie einfach einzelne Anführungszeichen.

4
Igor Q.

Obwohl ich die vorherigen Antworten gelesen hatte, dauerte es eine Weile, bis ich arbeiten konnte. Also, was funktioniert mit Laravel 5.5 und VueJs 2.5 für mich:

  1. Konvertieren Sie Ihr PHP - Array in einen serialisierten JSON-String. 

    Für PHP-Arrays siehe json_encode .
    Für Eloquent-Sammlungen siehe Eloquent-Methode toJson .
    Zur weiteren Referenz nennen wir diesen neuen JSON-String $arrayAsJSON.

  2. In Ihrer Ansicht (oder Blade-Vorlage):

    <some-vue-component :componentProperty="{{ $arrayAsJSON }}"></some-vue-component>
    
  3. Die Vue-Komponente:

    <template></template>
    
    <script>
      export default {
    
        props: ['componentProperty'],
    
        mounted() {
            console.log('some-vue-component mounted.');
            console.log(this.componentProperty)
        },
      }
    </script>
    
2
Didi

Kann formale Weise verwenden:

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

Ab Laravel 5.5 können Sie die @ json-Direktive verwenden.

<Chart [email protected]($points)></Chart>

1
godbout