Erreur Vue Js : "Unexpected token }"

Par Krokilex, il y a 9 ans

Javascript

Bonjour,

J'ai commencé la formation VueJs et je m'entrainais en essayant de realiser une div que change de class
en fonction de l'etat d'une variable(une variable que varie entre true et false).

J'ai defini ma fonction dans la partie methods mais j'obtiens toujours une erreur "Unexpected token }"
dès que je met une condition pour changer ma variable entre true et false.
Voici mon code:

HTML:

<div class="" id="app"> <div @click="verift" :class="{box: verif, line: !verif}"> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> <script type="text/javascript" src="App.js"></script> <style media="screen"> .line{ width: 75px; height: 10px; background-color: black; position: absolute; bottom: 0; transition: 0.5s; } .box{ width: 75px; height: 75px; background-color: black; position: absolute; bottom: 0; transition: 0.5s; } </style>

JS:

new Vue ({ el: '#app', data: { verif: false }, methods: { verift: function () { this.verif = false ? this.verif = true : this.verif = false, } } })

Je vous remercie pour votre aide

4 réponses

Krokilex, il y a 9 ans

Merci Azorgh lorsque je le fait sans condition cela fonctionne parfaitement :)

Krokilex, il y a 9 ans

Effectivement betaWeb je ne m'y connais pas vraiment en JS, j'ai regardé la formation Vue et elle m'a beaucoup interessé alors je le fait en me basant sur les quelques connaissances que j'ai ainsi que sur les quelques trucs qui se ressemblent entre le js et le php ^^

Azorgh, il y a 9 ans

Salut,

Dans un premier temps je ne comprend pas très bien ta "condition". Elle consiste à changer la valeur de vérif c'est ça ? Si true, alors on la met en false, sinon l'inverse ?

Si c'est ça, tu peux facilement faire quelque chose dans ce style, sans condition :

this.verif = !this.verif; //this.verif = inverse de this.verif; //Donc si verif == false, alors l'inverse == true

De plus, ta condition ternaire ne peux pas fonctionner ainsi. Il faudrait l'écrire comme ça :

this.verif = this.verif == false ? true : false; //On assigne la valeur de "this.verif == false ? true : false;" à this.verif.
betaWeb, il y a 9 ans

Salut,

A la lecture de ton code, on peut déjà se rendre compte que tu ne maîtrises pas complètement Javascript. La formation VueJS s'adresse avant tout aux dev 'expérimentés' en JS (liseret rouge au bas du thumb de la vidéo), si tu ne l'es pas, tu devrais d'abord passer par la formation JS :)