I was going to create a simple todo list in VUE using a tutorial but the new items do not appear, please help.
What did i do wrong? Is there something missing? I was going to create a simple todo list in VUE using a tutorial but the new items do not appear, please help.
What did i do wrong? Is there something missing?

<template>
      <div id="app">
        <div class="container">
          <h1>To Do List</h1>
          <input
            class="input"
            v-modell="newToDo"
            />
            <button class="add-button" v-on:click="add()">Add</button>
            <ul style="List-style-type: none;">
              <li v-for="(todo,i) in existingToDo">
                <span> 
                {{ i   1 }}: {{todo.text}}
                </span>
              </li>
            </ul>
        </div>
     
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          newToDo:``,
          existingToDo:[
            {text: `Get Groceries`, id:0},
            {text: `Run Errands`, id:1},
            {text: `Do Sports`, id:3}
          ]
        }
      },
      methods:{
        add(){
          this.existingToDo.push({
            text: this.newToDo,
            id: new Date().valueOf()
          }),
          this.newToDo=``
        },
        
      }
    }
    
    </script>
    
    <style>
    </style>

CodePudding user response：

I suspect it's the typo in your <input>: Try using v-model instead of v-modell. As of now, there is no new newToDo data property because the link to your input field is broken.

CodePudding user response：

1. You have to fix typo. (modell) double l letter.

2. I think you have to use uuid for getting id.

   import { v4 as uuidv4 } from 'uuid';

    methods: {
            add(event){
                event.preventDefault();
   
   
   
    this.existingToDo.push= {
                    id: uuidv4(),
                    text: this.newTodo
                }
   
   
   
    this.$emit("add-todo-event", existingToDo);
            this.newTodo= '';
        }
    }
   

maybe try to do it.