Vue Todo列表编辑后Local Storage未同步问题求助

嘿，我看到你的问题了——编辑Todo项时页面显示更新了，但LocalStorage里的数据没同步变更，对吧？这主要是两个小问题导致的，咱们一步步来修复：

问题根源 #

1. watch监听的局限性：你当前的watch只监听了todos数组的引用变化，但编辑操作修改的是数组内单个todo对象的topic属性，数组本身的引用没改变，默认的浅监听不会触发更新，所以LocalStorage不会同步。
2. 编辑流程缺少确认动作：当前点击编辑按钮只是切换输入框，但没有明确的“完成编辑”触发点，虽然Vue的双向绑定会更新内存数据，但最好在编辑完成后（比如回车或失焦）关闭编辑状态，确保数据变更被正确捕获。

修复方案 #

1. 给watch添加深度监听 #

修改watch配置，加上deep: true，让它能检测到数组内对象属性的变化：

watch: {
  todos: {
    handler(val) {
      this.$ls.set('todos', val)
    },
    deep: true // 新增：开启深度监听
  }
},

2. 优化编辑完成的触发逻辑 #

给编辑用的输入框添加@blur和@keyup.enter事件，编辑完成后关闭编辑状态：

<input v-if="todo.edit" type="text" v-model="todo.topic" @blur="todo.edit = false" @keyup.enter="todo.edit = false">

3. 修复addTodo方法的小bug #

你当前的addTodo里把vm.todo设为[]，这会导致后续输入绑定出错，应该重置为初始的对象格式：

addTodo(){
  var vm = this;
  vm.todos.push({topic:vm.todo.topic,edit: false });
  vm.todo = { topic: null, edit: false }; // 修复：重置为初始对象
}

完整修改后的代码 #

<!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>Todo List</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" @blur="todo.edit = false" @keyup.enter="todo.edit = false">
        <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: {
          handler(val) {
            this.$ls.set('todos', val)
          },
          deep: true
        }
      },
      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 });
          // 修复重置todo的代码
          vm.todo = { topic: null, edit: false };
        },
        removeTodo(index){
          this.todos.splice(index, 1)
        }
      }
    })
  </script>
</body>
</html>

这样修改后，你编辑Todo项时，无论是失焦还是回车完成编辑，LocalStorage都会同步更新最新的数据啦。

内容的提问来源于stack exchange，提问作者Isaac Bajada