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>
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)