2

Нужно сделать так, чтобы при клике на определённую кнопку дублировался таск ( задание ) в ToDo листе на vue и, так-же, сохранялся в localStorage

Вот код HTML:

<ul v-for='(task, index) in filtered'>
  <li><span v-if="task !== editingTask" @click="editTask(task)">{{ task.name }}</span><input type="text" v-if="task === editingTask" v-auto-focus class="left" @keyup.enter="endEditing(task)" v-model="task.name"></li>
  <li><button class="btn btn-primary">Дублировать</button></li>
  <li><button class="btn btn-danger btn-block" v-on:click="deleteTask(task)">Удалить</button></li>
</ul>

Вот Vue код:

    var keyLocal = 'vue-js'
    var todoStorage = {
      fetch: function () {
        var todos = localStorage.getItem(keyLocal)
        return  typeof(todos !== "undefined") ? JSON.parse(todos) : []
      },
      save: function (todos) {
        localStorage.setItem(keyLocal, JSON.stringify(todos));
      }
    }
   var app = new Vue({
      el: '#taskApp',
      data: {
        search: '',
        inputVal: '',
        changeVal: '',
        editingTask: '',
        show: false,
        tasks: []
      },
    watch: {
      tasks: {
        handler: function(tasks) {
          todoStorage.save(tasks);
        }
      }
    },
    mounted() {
      this.tasks = todoStorage.fetch()
    },
      methods: {
      // Добавление таска
        addTask: function(e) {
          e.preventDefault();
          if(this.inputVal){
            this.tasks.push({
              name: this.inputVal,
              status: false,
            })
          }
        },
      // Удаление таска
        deleteTask: function(task) {
          let index = this.tasks.indexOf(task)
          this.tasks.splice(index, 1)
        },
      // Редактирование таска
        editTask: function (task) {
          this.editingTask = task;
        },
      // Окончание редактирования и занесение 
        endEditing: function () {
          this.editingTask = null
          localStorage.setItem(keyLocal, JSON.stringify(this.tasks))
        }
    },
    computed: {
      filtered () {
        return this.tasks.filter(tasks => tasks.name.match(this.search))
      }
     }
    })

2 ответа 2

1

На обработчик кнопки добавляете новый элемент в "filtered".

3
  • Если не трудно, не могли бы переформулировать?
    – KEZOV
    20 июл 2017 в 7:50
  • @Кенан Возможно я не правильно понял вопрос , теоретически вы хотите дублировать ul по клику на кнопку "дублировать" ? Просто добавляйте новый элемент в ваш обьект\массив filtered .
    – MoJlo4HuK
    20 июл 2017 в 7:55
  • Да, я хочу дублировать ul по клику на кнопку "дублировать". Добавлю в вопрос сам vue код, да бы было понятнее. Скорее всего, возможно, проблема в том, что забыл поставить данный код
    – KEZOV
    20 июл 2017 в 7:59
0

Добавляете обработчик на кнопку, в нем реализуете дублирование таска:

dublicateTask(task) {
 this.tasks.push({...task})
}
1
  • Спасибо за ответ, но проблему уже решил dbl: function(task, index) { this.tasks.splice(index, 0, Object.assign({}, task)) }
    – KEZOV
    20 июл 2017 в 12:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.