Блог

Моя структура объекта данных 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 , что атрибут является массивом, меня интересует только, есть ли ошибка, если, если есть, тогда отобразите первую).

Этого v-if="addPersonForm.errors" должно быть достаточно, чтобы предотвратить возникновение ошибки. Вы уверены, что именно эта часть кода вызывает проблему?

В любом случае вы можете гарантировать, что не получите ошибку, используя необязательную цепочку

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