时间戳

首页 > 解决方案 > 当 Vue.js 中我的对象中存在属性时有条件地显示块？

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>

加载页面时，vue 会抛出一个错误，说Cannot read property 'name' of null. 我怀疑这是因为addPersonForm.errors加载时是空的。name如果属性存在，有人可以帮助我如何正确显示条件标签吗？

（我知道该name属性是一个数组，我只对有错误感兴趣，如果有则显示第一个）。

标签： javascriptvue.js

解决方案

v-if="addPersonForm.errors"应该足以防止错误发生。您确定是这部分代码触发了问题吗？

在任何情况下，您都可以通过使用可选链接来确保不会出错

                                          <!-- note the "?"  -->
<small class="form-text text-danger">@{{ addPersonForm.errors?.name[0] }}</small>

推荐阅读