编辑本地存储中的数据

Question

我有一个针对不同主题的简单待办事项列表，它添加、删除和编辑数据，但是当我尝试编辑本地存储中的数据时，只有 html 中显示的文本在变化，而在本地存储。按下编辑按钮即可完成编辑，此时将显示一个用于编辑数据的文本框。

<!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)">&#10006;</button>
            <button @click="todo.edit = !todo.edit">&#9998;</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>

Answer 1

您应该更改本地存储的密钥名称。它应该是独一无二的。我觉得还是用vuex好，不用本地存储。

但如果你真的想要本地存储实现，你可以这样做。

this.$ls.set('todos-id', val)

这样每个本地存储都是唯一的。

Answer 2

您的代码似乎没有编辑待办事项的编辑功能。

我做了一些修改并添加了一个编辑功能让它工作。您可以在这里查看：https://codesandbox.io/s/relaxed-cannon-tj7ef?fontsize=14。单击编辑图标并编辑后，按回车键。

这是我的修改：

修改了待办事项循环中的表单：

  <input
    v-if="todo.edit"
    type="text"
    v-model="todo.topic"
    v-on:keyup.enter="editTodo(todo.topic, index)"
  />

添加了编辑待办事项的功能：

  editTodo(text, index) {
    this.$set(this.todos, index, {
      topic: text,
      edit: false
    });
  },

编辑本地存储中的数据

editing data in local storage

javascript

local-storage

vue.js