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.
<Chart points='{!! json_encode($points) !!}'></Chart>
Verwenden Sie einfach einzelne Anführungszeichen.
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:
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
.
In Ihrer Ansicht (oder Blade-Vorlage):
<some-vue-component :componentProperty="{{ $arrayAsJSON }}"></some-vue-component>
Die Vue-Komponente:
<template></template>
<script>
export default {
props: ['componentProperty'],
mounted() {
console.log('some-vue-component mounted.');
console.log(this.componentProperty)
},
}
</script>
Kann formale Weise verwenden:
<Chart points='<?php echo json_encode($points); ?>'></Chart>
Ab Laravel 5.5 können Sie die @ json-Direktive verwenden.
<Chart [email protected]($points)></Chart>