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

我正在构建一个具有高级todo应用程序的扩展，用户添加todo任务，这些任务将保存在localStorage上，当扩展具有特定状态（称为“工作”）时，它将显示存储在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>

这也是：

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

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

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

可能的原因：有一个可能的原因是，在应用程序状态变为

work

之前，它没有

localStorage[“pr\u currSession”]

，但一旦状态变为

work

，它就存在了。

---

这可能是它没有显示任何任务的原因吗？

在初始化vue实例时，似乎没有任务保存在localStorage中，但它们稍后会保存在那里

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

---

您可以启用状态变量，并在发生更改时加载任务。

在初始化vue实例时，似乎没有任务保存在localStorage中，但它们稍后会保存在那里

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

---

当此更改时，您可以启用状态变量并加载任务。

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

• 使用

  v-bind:class=“{done:task.checked}”class=“收集项”
  

  而不是

  v-bind:class=“{done:task.checked}集合项”

• 从

  {{{{task.text}}

---

在开发过程中，您可以使用未压缩版本（而不是

min.js

）来获得很酷的警告！

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

• 使用

  v-bind:class=“{done:task.checked}”class=“收集项”
  

  而不是

  v-bind:class=“{done:task.checked}集合项”

• 从

  {{{{task.text}}

---

您可以在开发过程中使用未压缩的版本（而不是

min.js

）来获得很酷的警告！

hmmm，vue devtool对您的

tasks

对象有何评论？嗯，vue devtool对您的

tasks

对象有何评论？

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