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

Question

我正在构建一个具有高级待办事项应用程序的扩展程序，用户添加待办事项任务，这些任务将保存在 localStorage 上，当扩展程序具有某种状态(称为“工作”)时，它会显示存储在的那些任务本地存储。

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

这是负责此操作的代码。

    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

它正确地向我显示当前 session 的任务，我的控制台和后台控制台都没有任何错误。

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

可能的原因:有一个可能的原因导致此方法不起作用，即首先在应用程序状态变为 work 之前，它没有localStorage["pr_currSession"] ，但是一旦状态为 work 它就存在。这可能是它不显示任何任务的原因吗？

Answer 1

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

• 使用v-bind:class="{done: task.checked}"class="collection-item"
而不是v-bind:class="{done: task.checked} collection-item"

• 从 {{{ task.text }}

中删除多余的括号

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