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

Question

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

[Vue warn]：计算表达式“permissions.edit”时出错：TypeError:无法读取未定义的属性“edit”（在组件中找到）：

相关代码：

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

结果：

权限显然不是未定义的。发生什么事？让事情变得更混乱的是，如果我将一个文本对象传递给组件（：permissions=“{edit:true}”），警告就会消失，但是{permissions}}的json输出看起来完全相同。

Answer 1

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

Answer 2

正如在您文章的评论中所讨论的，这是由于在created（）中使用异步API调用yo do来最初获取权限对象。

我建议你用类似的东西https://github.com/vuejs/vue-async-data. 它允许您异步获取数据（例如使用vue资源），并提供一种隐藏组件内容的方法，直到加载数据完成。

尽管您可以自己轻松模拟：

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”隐藏内容，直到实际加载权限。