javascript - v-if 指令中允许的查找级别是多少？

Question

我有一段这样的标记:

<div class="form-group" v-if="model.owner.enabled">

范围内可用的模型如下所示:

{
   ...
   owner: {
      enabled: true
      ...
   }
   ...
}

但是 vue 不喜欢它并且去:

TypeError: Cannot read property 'enabled' of undefined

谁能发现错误？可能是因为查找仅限于模型对象的第一层？

事实上，如果我将标记更改为:

<div class="form-group" v-if="model.owner">

它正常工作并且元素被渲染。据说是因为我猜 model.owner 对象被认为是真实值。

谢谢

Answer 1

没有限制。我怀疑这里的问题是您的模型是异步填充的。如果是这种情况，那么，当 Vue 首次呈现时，model.owner 将是 undefined 和 model.owner.enabled将导致您描述的错误。

model.owner 可能有效，因为 model 已定义，而 owner 未在 Vue 呈现时定义。然后，当模型被填充时，owner 不再是未定义的。

你可以使用守卫来处理这个问题。

<div class="form-group" v-if="model.owner && model.owner.enabled">

这是一个 example .