试图理解 Vue.js 中的“未定义”警告答案

【问题标题】：Trying to understand "undefined" warning in Vue.js试图理解 Vue.js 中的“未定义”警告
【发布时间】：2016-08-02 00:57:52
【问题描述】：

这出现在我的浏览器控制台中：

[Vue 警告]：评估表达式“permissions.edit”时出错：TypeError：无法读取未定义的属性“编辑”（在组件中找到：）

相关代码：

{{ permissions | json }}
<a class="button" v-on:click="toggleEditMode" v-if="permissions.edit">{{ editMode ? 'Save' : 'Edit' }}</a>

结果：

权限显然不是未定义的。这是怎么回事？更令人困惑的是，如果我将文字对象传递给组件 (:permissions="{edit: true}")，警告就会消失，但 {{ permissions | json }} 的 json 输出看起来完全一样。

【问题讨论】：

问题似乎是您以某种方式添加了 edit 属性，而 Vue 没有注意到它。（json 过滤器不关心反应性，所以在那里没关系）你何时以及如何创建/填充权限对象？您是否在某处更改它，在 ready() 钩子或其他地方？您是否在 data 组件中定义了 permissions 对象，并且 edit 属性已经到位？这些是我们需要的相关信息。
这是来自 vue-resource 的服务器响应，在我的 ViewModel 的 created() 方法中创建。它使用this.$set 分配给 ViewModel，并在我的模板中作为道具传递。
好了。使用 vue-resource 的 APi 调用是异步的，这意味着 Vue 不会等待它完成，而是继续编译模板，这比 API 调用快得多。所以当 Vue 评估 permissions.edit 时，它还没有被设置，因为 API 调用仍在后台进行。一旦调用完成，permissions 就会正确设置，并且您的模板会按预期工作。

标签： javascript vue.js

【解决方案1】：

这是因为 permissions 不是 Vue path 对象。一旦你将它作为道具传递，它将成为一个，你将能够像那样引用它。您能否为您的组件提供完整代码以进行进一步解释？

【讨论】：

【解决方案2】：

正如您帖子的 cmets 中所讨论的，这是由于您在 created() 中执行的异步 API 调用最初获取权限对象。

我建议你使用https://github.com/vuejs/vue-async-data 之类的东西。它允许您异步获取数据（例如使用 vue-resource）并为您提供隐藏组件内容的方法until loading the data has finished。

虽然您可以轻松地自行模拟：

data: function () {
  return { loaded: false, permissions: {} }
},
created() {
  return this.$http(...).then(function (result) {
    this.permissions = result.data.permissions // or however your data is
    this.loaded = true
  })
}

并在模板中，在包装 div 上使用 v-if="loaded" 隐藏内容，直到实际加载权限。

【讨论】：

这正是我所需要的，但我仍然试图将我的头脑围绕在双向绑定上。谢谢！