VueJS dans une vue cakePHP

Default
,

Bonjour,

Je souhaite dans une de mes vues cakephp "launcher.ctp" mettre un bout de code avec du VueJS. Je ne savais pas si je devais placer mon message dans le forum CakePHP ou le forum JS.

Ce que je fais

Voici ce que je met dans le fichier launcher.ctp

<div id="app2">        
        <ul>
            <li v-for="p in persons">
                {{p.nom}}, {{p.prenom}}, {{p.age}}
            </li>
        </ul>
     
    </div>
    <script>
        new Vue({
            el: '#app2',
            data: {
                persons:[{
                    "prenom": "Emalee",
                    "nom": "Ridges",
                    "age": 55
                    }, {
                    "prenom": "Lil",
                    "nom": "Tuvey",
                    "age": 38
                    }]
            },
        
        })
    </script>

Ce que j'obtiens

Mais VueJS semble ne pas interpréter correctement ma balise #app2 car j'obtiens ce message d'erreur:

vue.js:634 [Vue warn]: Cannot find element: #app2

Auriez vous une idée ?
Merci par avance

3 Réponse

17162
,

Bonsoir.
Tu devrais commencer par étudier le HTML avant, car #app2 n'est pas un élément, mais un sélecteur, qui indique donc un élement ayant pour valeur de l'attribut id app2.
Une fois que tu auras plus de connaissances niveau HTML, tu devrais comprendre ou est le problème, si ce n'est toujours pas le cas, tu devrais également nous montrer le code de ton layout, de manière à ce que nous puissions t'aider efficacement.

Default
,

Bonjour,
Je pense que ton script s'exécute alors que la page n’est pas complètement chargée.
Tu peux essayer d’ajouter un attribut defer à ton script ou d’utiliser un addEventListener pour attendre que tout soit chargé correctement.

Gillesr

Default
,

Merci pour vos réponses.
Merci Lartak pour ce petit recadrage mais je sais ce que sont des balises et sélecteur html et c'est le moteur de Vue qui me donne ce message en parlant d'élément. As tu déja fait du VueJs?
De plus cet exemple succint marche hors CakePHP. D'où ma question en rapport avec la possibilité de faire ça dans CakePHP ou pas.

Merci gillesr, je vais creuser de ce côté là.