VueJS dans une vue cakePHP

jey1985
CakePHP

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

4 réponses

Lartak

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.

gillesr

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

jey1985
Auteur

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à.

Arbi

Bonjour
dans votre launcher.ctp il faut ajouter une div avec l'id app2

<div id="app2"></div>