Исправление добавленного задания в todo list vue.js

385
18 июля 2017, 21:07

Надо сделать так, чтобы при изменении в input'е (который появляется при клике на сам таск) изменялся сам таск и изменялся в localStorage. В моём случае получается, что данный таск заносится в localStorage, но и этот момент удаляет остальные и потом не отображается.

lightStorage = { 
	storage:{}, 
	getItem(id){return this.storage[id];}, 
	setItem(id,value){return this.storage[id]=value;} 
} 
 
var keyLocal = 'vue-js' 
    var todoStorage = { 
      fetch: function () { 
        var todos = JSON.parse(lightStorage.getItem(keyLocal) || '[]'); 
        return todos; 
      }, 
      save: function (todos) { 
        lightStorage.setItem(keyLocal, JSON.stringify(todos)); 
      } 
    } 
   var app = new Vue({ 
	  el: '#taskApp', 
	  data: { 
        search: '', 
        inputVal: '', 
        changeVal: '', 
        editingTask: '', 
        show: false, 
        tasks: [ 
            { 
                name: '', 
                status: false 
            } 
        ], 
	  }, 
    watch: { 
      tasks: { 
        handler: function(tasks) { 
          todoStorage.save(tasks); 
        } 
      } 
    }, 
    mounted() { 
      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 (todos) { 
          this.editingTask = lightStorage.setItem(keyLocal, JSON.stringify(todos)) // Вносит данные в массив в Value в Local Storage 
	   } 
    }, 
    computed: { 
      filtered () { 
        return this.tasks.filter((tasks) =>{ 
           return tasks.name.match(this.search) 
        }) 
      } 
     } 
    })
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js'></script> 
<div class="container col-sm-8 col-sm-offset-2"> 
  <div id="taskApp"> 
    <div class="inf"> 
      <h2 class='text-center'>Лист с делами</h2> 
      <form v-on:submit='addTask'> 
        <div class="col-sm-8 mb"> 
          <input type="text" class='form-control' v-model="inputVal" placeholder="Добавить"> 
        </div> 
        <div class="col-sm-4 mb"> 
          <input type="submit" value='Добавить' class='btn btn-primary btn-block'> 
        </div> 
        <div class="search-wrapper"> 
          <input type="text" v-model.trim="search" placeholder="Поиск" class="search"/> 
        </div> 
      </form> 
    </div> 
    <div> 
      <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-danger btn-block" v-on:click="deleteTask(task)">Удалить</button></li> 
      </ul> 
    </div> 
  </div> 
  </div>

Answer 1

lightStorage = { 
  storage: {}, 
  getItem(id) { 
    return this.storage[id]; 
  }, 
  setItem(id, value) { 
    return this.storage[id] = value; 
  } 
} 
var keyLocal = 'vue-js' 
var todoStorage = { 
  fetch: function() { 
    var todos = lightStorage.getItem(keyLocal) 
    return (typeof todos !== "undefined") ? JSON.parse(todos) : [] 
  }, 
  save: function(todos) { 
    lightStorage.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 
      todoStorage.save(keyLocal, JSON.stringify(this.tasks)) 
    } 
  }, 
  computed: { 
    filtered() { 
      return this.tasks.filter(task => task.name.match(this.search)) 
    } 
  } 
})
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js'></script> 
<div class="container col-sm-8 col-sm-offset-2"> 
  <div id="taskApp"> 
    <div class="inf"> 
      <h2 class='text-center'>Лист с делами</h2> 
      <form v-on:submit='addTask'> 
        <div class="col-sm-8 mb"> 
          <input type="text" class='form-control' v-model="inputVal" placeholder="Добавить"> 
        </div> 
        <div class="col-sm-4 mb"> 
          <input type="submit" value='Добавить' class='btn btn-primary btn-block'> 
        </div> 
        <div class="search-wrapper"> 
          <input type="text" v-model.trim="search" placeholder="Поиск" class="search" /> 
        </div> 
      </form> 
    </div> 
    <div> 
      <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-danger btn-block" v-on:click="deleteTask(task)">Удалить</button></li> 
      </ul> 
    </div> 
  </div> 
</div>

READ ALSO
паралакс фона в тексте

паралакс фона в тексте

Нужно сделать на странице надпись с фоновым изображениемТакже нужно применить для фона паралакс эффект

197
Ошибка Invalid argument supplied for foreach()

Ошибка Invalid argument supplied for foreach()

Знания php у меня сырые, решил потренироваться с парсингом данных с сайта с помощью phpQuery остановился в самом начале и уже довольно продолжительное...

153
syntax error, unexpected T_CLASS

syntax error, unexpected T_CLASS

ЗдравствуйтеНе могу понять, что за хрень такая: вставляю класс копипастом - ошибка, пишу в ручную - нет ошибки

204