How to transform this to a function in vuejs-CodePudding

I want to translate the title <h2>{{$t('vue.' key.replace('contract_data.',''))}} :</h2> and messages <li>{{error}}</li>, my collegue tell me that transform all into a methods in vuejs but i don't know how to do. this is my code:

<div v-if="getError">
  <div v-for="(_errors, key) in getError">
    <b-alert
      v-for="error in _errors"
      show
      variant="danger"
    >
      <h2>{{ $t('vue.' key.replace('contract_data.','')) }} :</h2>
      <li>{{ error }}</li>
    </b-alert>
  </div>
</div>

CodePudding user response：

What your colleague wants is that you extract the logic from the HTML to Javascript.

To solve this problem, your code could look like that:

template

<div v-if="getError">
  <div v-for="(_errors, key) in getError">
    <b-alert
      v-for="error in _errors"
      show
      variant="danger"
    >
      <h2>{{ formatKey(key) }} :</h2>
      <li>{{ error }}</li>
    </b-alert>
  </div>
</div>

script

export default {
  methods: {
    formatKey (key) {
      return this.$t('vue.'   key.replace('contract_data.', ''))
    }
  }
}

Bonus: From a personal stand point I would suggest to add a key attribute to your v-for directives. (Doc: https://vuejs.org/v2/guide/list.html#Maintaining-State)