vue.js - Vue.js - 将响应属性添加到对象数组。适用于本地 json。从 API 获取时不起作用

Question

我受到 Smashing Magazine 一篇关于用 Vue 替换 jQuery 的文章的启发。我在我的 WordPress 主题中替换了 jQuery 驱动的模式、表单、平滑滚动等，并对结果感到满意！

我正在开发我的导航菜单，该菜单可以使用 Vue、axios 和 WordPress REST API 轻松重新创建。

问题是我正在尝试重新创建活动状态以在移动设备上切换子菜单。我正在尝试为每个对象添加“active”的反应属性：false。

如果我从 API 复制 json 响应并将其本地粘贴到我的 navItems 数组中，绕过 axios.get()，这可行:)

但是当我从 API 中获取该 json 时，它不起作用:(

知道我做错了什么吗？

CodePen 链接：

非工作示例 - 通过 API 获取菜单项

工作示例 - 存储在本地数组中的菜单项

this.$nextTick(function () {
  for (let i = 0; i < this.navItems.length; i++) {
    Vue.set(this.navItems[i], 'active', false)
  }
})

标签： vue.jsvuejs2