Traitement d'un json via Vuejs

Par leknoppix, il y a 5 ans

PHP Laravel

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'essaie de transmettre à un component vuejs que je suis en train de coder un attribut de type json générer dans à partir d'un tableau générer. Ci dessous un exemple.

<?php ... $data = array(); $data['id'] = $post['main_img']; $data['name'] = $post['image']['name']; $data['legend'] = $post['image']['legend']; $data['url'] = $post['image']['url']; } $jsonimage = json_encode($data); ....

J'obtiens donc ce json:

{"id":78219,"name":"Les correspondants.png","legend":null,"url":"uploads\/main_imgs\/45437\/20200607071622sC0J.png"}

Une fois générer, j'injecte ce json dans mon component:

<simpledropzoneupload json='{{ $jsonimage }}' ......></simpledropzoneupload>

Dans mon component, j'ai défini json en props en précisant le typage Object.

export default { name: "SimpledropzoneUpload", props : { accept: {type: String, required: false, default: '*'}, json: Object, .... } }

Ce que j'obtiens

Je souhaiterais pouvoir, dans le template, afficher les diverses valeurs du json. Pour cela je fais tout simplement {{ json.url }}.... Hors, cela ne fonctionne pas.
Si je souhaite afficher l'intégralité du json en faisant {{ json }}, il s'affiche dans l'intégralité, par contre, je n'arrive pas à récupérer les clés de mon choix.

Auriez-vous une idée de la provenance de mon problème?

leknoppix

3 réponses

Balsakup, il y a 5 ans

Salut,

Peut-être que ton JSON est juste lu en tant que chaîne de caractères dans VueJS, donc impossible à parser.
Si tu fais un console.log(json) et un console.log(JSON.parse(json)) as-tu une différence ?
Sinon, la meilleure technique, sera de juste passer l'ID de ton média et récupérer le reste en ajax via une API REST

leknoppix, il y a 5 ans

Merci @Balsakup et @Younes Beaila pour vos réponses.
En effet, les console.log proposés par Balsakup m'ont aidé à comprendre.
Alors, le premier log me renvoie uniquement une valeur string. Le second console.log m'a permis de parse le json récupéré par le biais des props. J'ai donc créer une fonction via un mounted() et le tour a été joué.
Merci pour votre aide.