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

Question

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

  

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

相关代码：

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

结果：

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

Answer 1

正如您对帖子的评论中所讨论的那样，由于您在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"来隐藏内容，直到实际加载权限为止。

Answer 2

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