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

one text

Solution:

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/vue@3.2.26"></script>

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

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