Mon app ne s'affiche pas (résolu)

Bonjour tout le monde !
Je suis nouvelle sur Vue.js. J’essaie d’apprendre et je me dis que ce sera plus simple d’apprendre en faisant. Alors j’ai voulu faire une to-do list et c’est là que les ennuis ont commencé :rofl:
J’ai voulu suivre ce tuto : lien tuto youtube veryacademy et j’en suis à 12:40 environ.
Et la première fois que j’ai fait ça j’ai eu plein d’erreurs de compilation. Il a fallu que j’enlève plein de morceaux de code si bien qu’à la fin ça n’avait plus aucun sens et me donnait encore plus d’erreurs de compilation. Malheureusement, je n’ai pas pensé à screener ces erreurs quelque part…
Parce que là je ne vois plus ces erreurs ! Ça semble compiler (en tout cas ma console de commande me dit que ça compile) mais je ne vois rien sur mon app !
Pouvez-vous m’expliquer s’il-vous-plaît ?
J’ai mis du code sur un codepen, même si je ne peux pas afficher le rendu non plus : https://codepen.io/eliplu/pen/yLerQgO L’encadré JS c’est mon App Vue. C’est à priori ça qui pose problème. Pourtant je suis le tuto :rofl:
Je vous fait une capture d’écran de ce qui s’affiche sur mon app dans le navigateur, avec le Vue devtools :

Est-ce que mon problème viendrait de ma version de Vue, plus récente que celle du tuto ?

EDIT : J’ai réussi à push ma to do sur github. Voilà le lien : https://github.com/ElisabethPlu/todo2

Dans codepen, on ne peut pas mettre le code d’un SFC dans le cadre JS qui attend seulement du JS.

Mais pour ton code en lui même, je vois v-for="1 in list" de problématique. Pourquoi ce 1 ?
Il faut mettre un nom de variable, par exemple v-for="item in list".

On ne peut pas utiliser des chiffres dans les noms de variable en JS

Merci pour la réponse :slight_smile: C’est quoi le meilleur endroit pour montrer mon code alors ? J’ai vu les autres propositions, faut que je les teste.
En fait dans le tuto je n’arrive pas à savoir si c’est un 1, un l ou autre chose du coup j’ai un peu tout testé et le problème est que mes changements font des parse errors.

Voilà le bout de code qui, à l’évidence, me pose problème sur le tuto :

Voilà mon code :

Je up pour dire que j’ai pu mettre ma todo sur github et j’ai mis le lien dans mon premier message.

ça a bien l’air d’être un L minuscule (ça ressemble bcp au l de list).

La doc de vue donne un exemple avec SFC :


via codesandbox :

plusieurs remarques concernant ton code

  • quel IDE utilises tu ? je te conseille VS code avec une extension pour eslint.
    Avec ce setup, la coloration syntaxique (et les trucs sous lignés) t’indique directement les problèmes de ton code :

  • pas très pratique le template que tu utilises. Tu es obligé de faire npm run build && npm run serve après chaque modif de ton code… généralement, on a une commande npm run dev qui lance un server local (et qui se met à jour dès que tu fais des modif dans ton code, sans avoir à relancer des npm run ...).

Merci, je vais regarder ce que je peux faire. Entre temps j’ai refait d’autres tutos et mangé d’autres docs, peut-être que je comprendrais mieux mon bout de code :rofl:
Ouhlala ce lien est trop bien ! Je vais l’éplucher, merci.

Pour l’IDE j’utilise Atom.
Pour mon template nan je fais pas ça. J’installe tout en CLI, npm run serve, et j’ai mon serveur local. Je n’ai pas à relancer, les modifications se font dès que mon code est sauvegardé.

Merci pour ton aide :slight_smile:

EDIT : J’ai pu corriger mon code et ça marche wouhouhou !
En fait il fallait mettre des L minuscules comme indiqué et ensuite, si j’avais des erreurs c’était parce qu’il me manquait des ". Notamment avant le v-for comme on peut le voir sur mon screen. J’ai rajouté une " pour le v-model aussi parce que j’ai dû la supprimer par accident. Ça marche maintenant. Je vais continuer cet exercice-là et voir ce que tu m’as donné. Merci :star_struck: