Tengo un archivo trainers.inc.php que genera una matriz con datos extraídos de una base de datos:
$trainers_meta[0] = array('Id' => $id, 'Name' => $name, 'Description' => $description, 'Experience' => $experience, 'Focus' => $focus, 'Fileformat' => $format, 'File' => $file); Codifiqué la matriz PHP como JSON usando la función PHP json_encode() :
$trainers_meta = json_encode($trainers_meta); La conversión se realizó sin advertencias ni errores que verifiqué específicamente. En la parte superior de mi archivo index.php necesito el archivo trainers.inc.php :
require_once('trainers.inc.php'); En la parte inferior del archivo, creo una variable de JavaScript con los contenidos JSON convertidos dentro de una etiqueta <script> :
<script> let trainersMeta = <?php echo $trainers_meta;?>; </script>En la parte inferior del archivo, enlazo el CDN de Vue.js:
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26"></script> Arriba, en el archivo index.php , trato de repetir el código HTML usando el atributo v-for de Vue.js:
<div class="container" v-for="trainer in trainersMeta"> <h1>Should appear on the page</h1> </div> Pero nunca aparece ningún contenido. Mi IDE me advierte que la variable trainersMeta no está definida. Entiendo que Vue.js debe ver la variable antes de que se cargue, por eso la inicializo antes de importar su CDN. Además, no importa en qué archivo o posición coloque la etiqueta <script> en la variable, siempre está indefinida. No puedo simplemente inicializar la variable dentro del código Vue.js porque Vue.js es completamente incompatible con PHP en este sentido. Incluso poner todo el código de Vue.js dentro de una etiqueta <script> en index.php no funciona y el código de Vue.js simplemente nunca se compila debido a eso. ¿Cómo puedo pasar una variable codificada PHP JSON a Vue.js para que la vea/utilice?
Por lo que vale, nunca he usado Vue.js antes de hoy. Todo lo que he recopilado, lo recogí en unos 5 minutos de la documentación .
Tienes:
trainersMeta )<div class="container" )<script ).no has :
Debe crear un objeto que tenga un método de datos que devuelva el objeto que ha creado, y debe llamar a Vue.createApp con ese objeto y luego montarlo en un contenedor alrededor de su plantilla.
Tal:
<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>