Как добавить значение ввода в список li?

Я пытаюсь добавить значение ввода в виде <li> в список <ul>.

Я смог добавить его, привязав значение к списку массивов lis. Однако он не остается там, когда я очищаю поле ввода. Как я могу это исправить?

HTML-код:

<div id = "app">
  <h1>{{ message }}</h1>
  <form v-on:submit.prevent = "addNewTodo">
    <input type = "text" v-model = "todo.task">
    <button type = "submit">Add todo</button>
  </form>

  <ul>
    <li v-for = "todo in todos" :class = "{ completed: todo.isActive }" @click = "$set(todo, 'isActive', !todo.isActive)">
     {{ todo.task }} <span v-on:click = "deleteTodo">{{ todo.delete }}</span>
    </li>
  </ul>
</div>

JS-код:

var app = new Vue({
  el: '#app',
  data: {
    message: 'List of things to do today',
    todos: [
      { task: 'Have breakfast', delete:'(x)'},
      { task: 'Go to the gym', delete:'(x)'},
      { task: 'Study Vuejs', delete:'(x)'}
    ],
    todo: {task: '', delete: '(x)'}
  },
  methods: {
    addNewTodo: function(){
      this.todos.push( this.todo );
    },
    deleteTodo: function(){
      this.todos.shift( this.todo )
    },
  }
});

Вот пример JSfiddle: https://jsfiddle.net/mercenariomode/gwd34815/1/

javascript vue.js vuejs2 vue-directives

18.02.2019 00:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 356

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы всегда ссылаетесь на это свойство, вы должны правильно клонировать его, например:

 let t = {};
 Object.assign(t,this.todo)
 this.todos.push( t );

Еще одна проблема, которую я вижу в вашем коде, заключается в том, что вы удаляете неправильную задачу, чтобы исправить это, просто передайте индекс выбранной задачи методу deleteTodo следующим образом:

  <ul>
    <li v-for = "(todo,i) in todos" :class = "{ completed: todo.isActive }" @click = "$set(todo, 'isActive', !todo.isActive)">
      {{ todo.task }} <span v-on:click = "deleteTodo(i)">{{ todo.delete }}</span>
    </li>
  </ul>

и используйте this.todos.splice(i,1);, чтобы удалить данную задачу:

 deleteTodo: function(){
      this.todos.splice(i,1);
    }

Я попробовал ваш код, он не работает. Не возражаете ли вы сделать образец JSfiddle?

— 18.02.2019 00:32

18.02.2019 00:13

Ответ принят как подходящий

Вам нужно изменить ссылку на объект, но в вашем случае было бы лучше привязать «v-модель» к свойству «задача»

HTML-код:

<form v-on:submit.prevent = "addNewTodo">
    <input type = "text" v-model = "task">
    <button type = "submit">Add todo</button>
</form>

JS-код:

el: '#app',
  data: {
    message: 'List of things to do today',
    todos: [
      { task: 'Have breakfast', delete:'(x)'},
      { task: 'Go to the gym', delete:'(x)'},
      { task: 'Study Vuejs', delete:'(x)'}
    ],
    task: '',
}

а в методе addNewTodo реализовать логику добавления объекта в массив

addNewTodo: function(){
        let todo = {task: this.task, delete: '(x)'};
        this.todos.push(todo);

        this.task = ''; // clear data in input
},

JSFiddle: https://jsfiddle.net/nm29yq7d/1/

18.02.2019 00:31