Show errors with alerts with vuejs

Question

I want to show errors with alerts using bootstrap, how do I do with vuejs?

This is my code:

<div v-if="this.getError">
      <div v-for="(_errors, key) in this.getError">
        <p>{{key.replace('contract_data.','')}}</p>
        <ul>
          <li v-for="error in _errors">{{error}}</li>
        </ul>
      </div>
    </div>

And This is Json: https://i.stack.imgur.com/AkBmJ.png

Answer 1

Try to remove "this" keyword in your template. It causes some issues there, specially with v-for loops.

<div v-if="getError">
      <div v-for="(_errors, key) in getError">
        <p>{{key.replace('contract_data.','')}}</p>
        <ul>
          <li v-for="error in _errors">{{error}}</li>
        </ul>
      </div>
    </div>