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 you have read our privacy policy.

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