How do I pass a PHP array to Vue.js?

Question

I have trainers.inc.php file which generates array with data retreived from a database :

$trainers_meta[0] = array('Id' => $id, 'Name' => $name, 'Description' => $description, 'Experience' => $experience, 'Focus' => $focus, 'Fileformat' => $format, 'File' => $file);

I encoded the PHP array as JSON using the PHP json_encode() function :

$trainers_meta = json_encode($trainers_meta);

The conversion went without any warnings or errors for which I specifically checked. At the top of my index.php file I require the trainers.inc.php file :

require_once('trainers.inc.php');

At the bottom of the file I create a JavaScript variable with the converted JSON contents inside of a <script> tag :

<script>
    let trainersMeta = <?php echo $trainers_meta;?>;
</script>

At the bottom of the file I link to the Vue.js CDN :

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Above in the index.php file I try to echo out HTML code using the v-for attribute of Vue.js :

<div class="container" v-for="trainer in trainersMeta">
   <h1>Should appear on the page</h1>
</div>

But no content ever appears. My IDE tells me a warning that the trainersMeta variable is undefined. I get that Vue.js must see the variable before it's loaded which is why I initialize it before actually importing it's CDN. Besides it doesn't matter what file or position do I put the <script> tag at the variable is always undefined. I cannot simply initialize the variable inside of the Vue.js code because Vue.js is completely incompatible with PHP in this regard. Even putting all the Vue.js code inside of a <script> tag in index.php doesn't work and Vue.js code simply never compiles at all because of it. How can I pass a PHP JSON encoded variable to Vue.js for it to see/use it?

Quentin · Accepted Answer · 2021-12-18 18:13:40Z

3

For what it is worth, I've never used Vue.js before today. Everything I've gleaned, I picked up in about 5 minutes from the documentation.

You've:

created a variable (trainersMeta)
built a template (<div class="container")
loaded the Vue library (<script).

You haven't:

written a Vue application to use that data

You need to create an object that has a data method which returns the object you've created, and you need to call Vue.createApp with that object and then mount it on a container around your template.

Such:

<script>
  let trainersMeta = {
    Id: 123,
    Name: 'Bob'
  };
</script>
<div id="app">
  <div class="container" v-for="trainer in trainersMeta">
    <h1>Should appear on the page</h1>
    {{trainer}}
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
  const Trainers = {
    data() {
      return {
        trainersMeta
      }
    }
  }

  Vue.createApp(Trainers).mount('#app')
</script>

answered Dec 18, 2021 at 18:13

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

541daw35d Over a year ago

Huge thank you for the example that you supplied. You're right I wasn't mounting the variable with the app. Trust me though that I've spend hours upon hours scrolling through the documentation and various websites before I asked the question in the first place and could not find a single relatable example which would point me to the solution. It's pretty simple yet it was so hard atleast for me. Thank you.

Collectives™ on Stack Overflow

How do I pass a PHP array to Vue.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related