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

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  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?

CodePudding user response：

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 )
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  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>