0

Надо сделать так, чтобы при изменении в 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>

1 ответ 1

0

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>

9
  • К сожалению, при вставке этого кода начало выдавать ошибку: TypeError: Cannot read property 'filter' of null
    – KEZOV
    18 июл 2017 в 10:14
  • Странно.. Поправил, чтобы запускалось прямо на это странице. 18 июл 2017 в 11:07
  • Более менее, но помогло исправить. Но всё равно, если полностью очищаю кэш хранилища выдаёт ошибку, связанную с фильтром
    – KEZOV
    20 июл 2017 в 7:07
  • Не должно быть, скорее всего это происходит из-за того, что метод, который забирает данные из локального хранилища возвращает null или undefined, когда хранилище пустое, а должен вернуть пустой массив. 20 июл 2017 в 7:11
  • Думаю тут ошибка endEditing: function () { this.editingTask = null localStorage.setItem(keyLocal, JSON.stringify(this.tasks)) }
    – KEZOV
    20 июл 2017 в 7:12

Ваш ответ

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

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