Блог

Главная - Вопросы по программированию - Базовый список дел Vue: добавленный элемент списка не отображается

Базовый список дел Vue: добавленный элемент списка не отображается

#vue.js

Вопрос:

Я создаю простой список задач в Vue, используя учебник, но новые элементы не появляются. Что я сделал не так? Чего-то не хватает?

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

Комментарии:

1. Всем привет. Если фильтр минимальной длины говорит, что вам нужно написать более длинное описание, пожалуйста, не копируйте вставляйте то, что у вас есть. Читатели обычно расценивают это как вандализм. Переполнение стека-это кураторские вопросы и ответы, не слишком отличающиеся от документации или вики. Сообщения, которые читаемы и понятны, являются ключевым требованием.

Ответ №1:

  1. Вы должны исправить опечатку. (модель) двойная l буква.
  2. Я думаю, что вы должны использовать uuid для получения id .

    импорт { v4 как uuidv4 } из ‘uuid’;

      methods: {
         add(event){
             event.preventDefault();



 this.existingToDo.push= {
                 id: uuidv4(),
                 text: this.newTodo
             }



 this.$emit("add-todo-event", existingToDo);
         this.newTodo= '';
     }
 }

может быть, попытаться это сделать.

Комментарии:

1. Идентификаторы не обязательно должны быть UUID. Они просто должны быть уникальными в контексте v-for модели.

Ответ №2:

Я подозреваю, что это опечатка в вашем <input> : Попробуйте использовать v-model вместо v-modell . На данный момент нет нового newToDo свойства данных, потому что ссылка на ваше поле ввода нарушена.

Комментарии:

1. Добавляю комментарий к моему ответу, так как я не могу ответить на принятый: я не думаю, что ответ полностью правильный. Во-первых, вы, конечно, можете использовать uuid для идентификации ваших задач. Никто (я думаю, и ваш учебник тоже) не говорит, что вы должны это делать. Я бы вполне мог использовать индекс элемента в вашем массиве. Примечание: Vue ожидает, что вы также свяжете a :key с элементом, который использует v-for . Обратите внимание на предупреждения в консоли разработчика вашего браузера. Во-вторых, я не понимаю, зачем вам использовать $emit событие в вашем примере, поскольку все находится в одном компоненте Vue.

Метки: