मेरा Vue डेटा ऑब्जेक्ट संरचना इस प्रकार है:

enter image description here

केवल जब मेरे फॉर्म में त्रुटियां होती हैं, तो addPersonForm.errors ऑब्जेक्ट निम्नानुसार भर जाता है:

enter image description here

अब मेरे पृष्ठ में मैं सशर्त त्रुटि टैग और कक्षाएं प्रदर्शित करने का प्रयास कर रहा हूं जब 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 विशेषता एक सरणी है, मुझे केवल तभी दिलचस्पी है जब कोई त्रुटि हो, यदि कोई हो तो पहले प्रदर्शित करें)।

0
InvalidSyntax 8 अक्टूबर 2020, 01:17

1 उत्तर

सबसे बढ़िया उत्तर

त्रुटि को होने से रोकने के लिए v-if="addPersonForm.errors" पर्याप्त होना चाहिए। क्या आप सुनिश्चित हैं कि यह कोड का यह हिस्सा है जो समस्या को ट्रिगर कर रहा है?

किसी भी स्थिति में, आप वैकल्पिक श्रृखंला

                                          <!-- note the "?" 👇 -->
<small class="form-text text-danger">@{{ addPersonForm.errors?.name[0] }}</small>
0
Phil 7 अक्टूबर 2020, 22:31