To-do list на Vue.js с использованием LockalStorage

Итак начнем с основ практики использования фреймворка Vue.js, а именно создания to-do list или просто всем известной "тудушки" :). Что такое to-do list? Это список определенных запланированных заданий, которые надо выполнить или просто список событий. Реализовывать задачу будем с помощью браузерного хранения LockalStorage, что бы данные не удалялись во время перезагрузки.

Выглядеть "тудушка" будет следующим образом (демо):

  • {{ item }}
{{ count_items }}

Итак, для начала определим форму:

<div id="app" v-cloak>
        <ul>
            <li v-for="(item, key) in todo" :key="key" >
                <button type="button" @click="remove(key, $event)">X</button>
				<button type="button" @click="edit(key, $event)" v-show="visible !== key">Edit</button>
				<button type="button" @click="apply(key, $event)" v-show="visible === key">Apply</button>
				<span v-show="visible !== key"> {{ item }} </span>
				<input type="text" v-model="message" v-show="visible === key">
            </li>
        </ul>
        <div>
            {{ count_items }}
        </div>
        <div>
            <input type="text" v-model="message">
            <button type="button" @click="add">Add</button>
        </div>

    </div>

Далее основные методы:

new Vue({
            el: '#app',
            data: function() {
                return {
                    message: 'Hello VUE',
                    todo: JSON.parse(localStorage.todo || '[]'),
					visible: undefined
                }
            },
            methods: {
                add: function() {
                    this.todo.push(this.message);
                    this.message = '';
                },
                remove: function(key, e) {
                    this.todo.splice(key, 1);
                },
				edit: function(key) {
                    this.visible = key;
					this.message = this.todo[key];
					
                },
				apply: function() {
					this.$set(this.todo, this.visible, this.message);
					this.visible = false;
					
                }
				
            },
            computed: {
                count_items: function() {
                    return this.todo.length;
                }
            },
            watch: {
                todo: function(newVal) {
                    localStorage.todo = JSON.stringify(newVal);
                },
                message: function(a, b) {
                }
            }
        });

Данная реализация to-do list не самая простая, но до начала ее понимания следует знать Vue.js на достаточно хорошем уровне. Посмотреть реализацию календаря на Vue.js можно посмотреть здесь.

Скачать реализацию можно по ссылке.

Добавить комментарий