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/vue@3.2.26"></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?
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:
trainersMeta)<div class="container")<script).You haven't:
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/vue@3.2.26"></script>
<script>
const Trainers = {
data() {
return {
trainersMeta
}
}
}
Vue.createApp(Trainers).mount('#app')
</script>