Search code examples
validationmodelstorevuex

Backend form validation callback approach | vuex store | vuejs

My question is about handling "database validation errors" to the user using a Vuex store. (see image below) Any advice on how to handle this ? enter image description here

Then display my errors specified and "positioned" by field. Something like this:

<label>Title</label>
<input type="text">
<p v-if="errors.title">{{errors.title}}</p>

My first thought was to pass the 'db errors' received by the 'vuex store action' too a 'store state attribute', and use a computed property with a "store getter" in the vuejs component to display the error, but this just doesn't feel right to me.

Solution

  • I use this json model for getting data from the server: {status: 0, result: {}, error: {}}. In that case you can check the status attribute, for the success of the rest api call. So depends on the status, you can handle either the error, or the result variable.

    On the server side, if any error / exception caught, you can send back to the client (specifically), in the error variable.

    In your case, e.g.: you caught a db error on a server side, you define status for that (e.g.) 430, you send back the message with the error and the status code, that way you can handle nicely the problem.

    I hope it helps! :)