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。单击编辑图标并进行编辑后，按Enter。

这是我的修改内容

修改了todos循环中的表单：

  <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
    });
  },

编辑本地存储中的数据

2 个答案: