Javascript 当Vue.js中的“我的对象”中存在属性时，是否有条件显示块？

我的Vue数据对象结构如下：

仅当我的表单出现错误时，才会按如下方式填充

addPersonForm.errors

对象：

现在，在我的页面中，当执行以下操作填充

addPersonForm.errors.name

时，我尝试显示条件错误标记和类：

<form action="{{ route('business.queue.add') }}" method="POST" id="manual-add">
    <div class="form-group" v-bind:class="{ 'has-error' : addPersonForm.errors }">
        <label for="add-person-name">Customer Name</label>
        <input type="text" class="form-control" name="name" id="add-person-name" v-model="addPersonForm.fields.name">
        <template v-if="addPersonForm.errors">
            <small class="form-text text-danger">@{{ addPersonForm.errors.name[0] }}</small>
        </template>
        <template v-else>
            <small id="emailHelp" class="form-text text-muted">Name will be displayed internally and to the customer</small>
        </template>

    </div>

客户名称
@{{addPersonForm.errors.name[0]}
名称将显示在内部并显示给客户

加载页面时，vue会抛出一个错误，说明

无法读取null的属性“name”

。我怀疑这是因为加载时，

addPersonForm.errors

为空。 如果

name

属性存在，有人能帮助我正确显示条件标记吗

（我知道

name

属性是一个数组，我只对有错误感兴趣，如果有，然后显示第一个）。

如果

v-if=“addPersonForm.errors”

应该足以防止错误发生。你确定是这部分代码触发了问题吗

在任何情况下，您都可以通过使用

---

FYI，您可以将您的
v-if
/
v-else
直接放在
标签上。这里不需要使用
，使用
addPersonForm.errors
是不够的，因为我只需要显示此特定字段的错误模板。在更广泛的代码中有许多字段，这就是为什么我指定了
name
属性（它所涉及的字段）。但是，使用可选链接已经奏效。在这种情况下，您的问题没有包含足够的信息来准确描述您的问题