Question

我正在构建一个具有高级待办事项应用程序的扩展程序，用户添加待办事项任务，这些任务将保存在localStorage上，当扩展程序具有某种状态时（称为＆＃34; work＆＃34;），它显示存储在localStorage中的那些任务。

每个会话都添加了任务，因此每个会话都有一个任务列表，我保留当前会话的索引，以显示状态工作时该会话的任务。

这是负责此事的代码。

    todoManager = new Vue({
  el: "#todoEl",
  data: {
    tasks: JSON.parse(localStorage["pr_sessions"])[JSON.parse(localStorage["pr_currSession"]) - 1].tasks,
    numOfTasks: JSON.parse(localStorage["pr_sessions"])[JSON.parse(localStorage["pr_currSession"]) - 1].tasks.length
  },
  methods:{
    checkTask: function(){
      // Do Something cool here
    }
  }

})

我的HTML模板：

<div class = "container" v-show = "work">
    <h1>Tasks</h1>
    <div class = "todoArea" id = "todoEl">
      <p> Finish All Tasks To Start A New Session : </p>
      <ul class = "collection">
            <li v-for="task in tasks" v-bind:class="{done: task.checked} collection-item">
                <input type="checkbox" class="checkbox" v-model="task.checked">
                <label for="checkbox">{{{ task.text }}</label>
           </li>
      </ul>
    </div>
  </div>

div显示但ul为空，没有li，但是当打开控制台并输入以下内容时：

JSON.parse(localStorage["pr_sessions"]) // This print an array in the console

这也是：

JSON.parse(localStorage["pr_sessions"])[JSON.parse(localStorage["pr_currSession"]) - 1].tasks

它正确显示了当前会话的任务，我的控制台中没有任何错误，也没有我的后台控制台。

问题是div中没有显示任务，为什么？

可能的原因：有一个可能的原因导致此操作失效，首先是在应用状态变为work之前，它没有{\ n} { {1}}，但一旦状态localStorage["pr_currSession"]存在。这可能是它没有显示任何任务的原因吗？

Answer 1

看起来，在初始化vue实例时，localStorage中没有保存任何任务，但是稍后它们会存在。

当localStorage有任务时，我没有看到填充任务变量的代码。正如你所说：一旦状态是工作任务存在

您可以将watcher置于状态变量上，并在此更改时加载任务。

Answer 2

正如我所看到的，您的模板有一些错误：

使用v-bind:class="{done: task.checked}" class="collection-item"代替v-bind:class="{done: task.checked} collection-item"
从{{{ task.text }}

您可以在开发过程中使用未压缩的版本（而不是min.js）来获取很酷的警告！

为什么v-for不能在这个VueJS todo应用程序中工作？

2 个答案: