为什么 v-for 在这个 VueJS 待办事项应用程序中不起作用？答案

【问题标题】：Why is v-for not working in this VueJS todo app?为什么 v-for 在这个 VueJS 待办事项应用程序中不起作用？
【发布时间】：2016-12-23 21:26:56
【问题描述】：

我正在构建一个具有高级待办事项应用程序的扩展程序，用户添加待办事项任务，这些任务将保存在 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 之前，它没有localStorage["pr_currSession"]，但是一旦状态为work，它就存在。这可能是它没有显示任何任务的原因吗？

【问题讨论】：

hmmm，vue-devtool 对你的 tasks 对象有什么看法？

标签： javascript vue.js

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如我所见，您的模板有一些错误：

使用v-bind:class="{done: task.checked}" class="collection-item"而不是v-bind:class="{done: task.checked} collection-item"
去掉{{{ task.text }}的多余括号

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

【讨论】：