在本地存儲中編輯數據

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

似乎您的代碼沒有編輯功能來編輯待辦事項。

我做了一些修改並添加了一個編輯 function 讓它工作。 你可以在這里查看： https://codesandbox.io/s/relaxed-cannon-tj7ef?fontsize=14 。 單擊編輯圖標並進行編輯后，按回車鍵。

這是我的修改：

修改了 todos 循環中的表單：

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

添加了一個 function 來編輯 todo：

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

在本地存儲中編輯數據

問題描述

2 個解決方案

解決方案1
0 2019-11-09 16:09:48

解決方案2
0 已采納 2019-11-09 18:36:00

在本地存儲中編輯數據

問題描述

2 個解決方案

解決方案1 0 2019-11-09 16:09:48

解決方案2 0 已采納 2019-11-09 18:36:00

解決方案1
0 2019-11-09 16:09:48

解決方案2
0 已采納 2019-11-09 18:36:00