Perform CRUD Operations with Local Storage Data Vuejs

index.html

<div id="app">
  <input type="text" v-model="todo.title" placeholder="input todo"
         v-on:keyup.enter="addTodo"
         >
  
  <ul>
    <li v-for="(todo, index) in todos">
      
      <input v-if="todo.edit" type="text" v-model="todo.title">
      <span v-else>{{todo.title}} </span>
      <button @click="removeTodo(index)">&#10006;</button>
      <button @click="todo.edit = !todo.edit">&#9998;</button>
    </li>
  </ul>
</div>

perform-crud-operations-with-local-storage-data-vuejs.markdown

Perform CRUD Operations with Local Storage Data Vuejs

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

Vue.use(VueLocalStorage);
new Vue({
  el: '#app',
  data(){
    return {
      todo: {
        title: null,
        edit: false
      },
      todos: null || [],
    }
  },
  watch: {
    todos: function(val) {
      this.$ls.set('todos', val)
    }
  },
  mounted(){
    this.todos = this.$ls.get('todos', this.todos);
    var _this = this;
    this.$ls.on('todos', function(val) {
      _this.todos = val;
    });
  },
  methods:{
    addTodo(){
      var vm = this 
      vm.todos.push({title:vm.todo.title,edit: false })
      vm.todo = []
    },
    removeTodo(index){
      this.todos.splice(index, 1)
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-ls.min.js"></script>