CODEWITHSUNDEEP
vue.jsvuejs2
Beusebiu
Beusebiu

Reputation: 1513

Can't display values from request Vuejs

I try to display errors that I get from request, on validation.

But I get an error:

Cannot read property 'saleforce_id' of undefined

That's how my errors look like.

enter image description here

<b-form-group label="Saleforce Id">
    <b-form-input
        id="saleforce_id-input"
        v-model="saleforce_id"
        :class="{'is-invalid':errors.all_values.saleforce_id, 'is-valid':(!errors.all_values.saleforce_id && saleforce_id !== '')}"
    ></b-form-input>
    <div class="invalid-feedback">
        <span v-if="errors.all_values.saleforce_id">{{errors.all_values.saleforce_id[0]}}</span>
    </div>
</b-form-group>

Upvotes: 0

Views: 44

Answers (1)

glinda93
glinda93

Reputation: 8459

Somehow, the array structure is broken and the key must be all_values.saleforce_id.

If it's an expected behaviour, your code should like this one:

<b-form-group label="Saleforce Id">
    <b-form-input
        id="saleforce_id-input"
        v-model="saleforce_id"
        :class="{'is-invalid':errors['all_values.saleforce_id'], 'is-valid':(!errors['all_values.saleforce_id'] && saleforce_id !== '')}"
    ></b-form-input>
    <div class="invalid-feedback">
        <span v-if="errors['all_values.saleforce_id']">{{errors['all_values.saleforce_id'][0]}}</span>
    </div>
</b-form-group>

Otherwise, change the response structure from the backend.

Upvotes: 2

Related Questions