editing data in local storage
Question
I have a simple todo list for different topics which adds removes and edits data but when i am trying to edit the data from the local storage only the text displayed in the html is changing and not in the local storage. The edit is done by pressing on the edit button where a text box will show up to edit the data.
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://unpkg.com/vue-ls@2.3.3/dist/vue-ls.min.js"></script>
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="todo.topic" 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.topic">
<span v-else>{{todo.topic}} </span>
<button @click="removeTodo(index)">✖</button>
<button @click="todo.edit = !todo.edit">✎</button>
</li>
</ul>
</div>
<script>
Vue.use(VueLocalStorage);
new Vue({
el: '#app',
data(){
return {
todo: {
topic: 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({topic:vm.todo.topic,edit: false });
vm.todo = []
},
removeTodo(index){
this.todos.splice(index, 1)
}
}
})
</script>
</body>
</html>
2 answers
solution1
0 2019-11-09 16:09:48
You should change the key name of the local storage. it should be unique. I think it's better if you use vuex and not local storage.
But if you really want the local storage implementation you can do like this.
this.$ls.set('todos-id', val)
So that every local storage will be unique.
solution2
0 ACCPTED 2019-11-09 18:36:00
Seems you don't have an edit functionality on your code to edit todos.
I did some modification and added an edit function for it to work. You can check it out here: https://codesandbox.io/s/relaxed-cannon-tj7ef?fontsize=14 . After clicking the edit icon, and editing, hit enter.
Here is my modification:
Modified the form in the todos loop:
<input v-if="todo.edit" type="text" v-model="todo.topic" v-on:keyup.enter="editTodo(todo.topic, index)" />Added a function to edit todo:
editTodo(text, index) { this.$set(this.todos, index, { topic: text, edit: false }); },
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.