После игры с маской я обнаружил, что вы можете передать ей вычисленное значение, поэтому при изменении входного значения маска также может меняться.
new Vue({
el: '#app',
data: () => ({
value: '20290324K'
}),
computed: {
mask() {
const $this = this
const chars = this.value.split('');
const charsWithoutValidator = this.value.substr(0, this.value.length - 1).split('')
let currentValidator = 11 - charsWithoutValidator.reverse().reduce((sum,el,i) => sum += el * (i % 6 + 2), 0) % 11;
currentValidator = currentValidator == 10 ? 'N' : '#';
let nextValidator = 11 - chars.reverse().reduce((sum,el,i) => sum += el * (i % 6 + 2), 0) % 11;
nextValidator = nextValidator == 10 ? 'N' : '#';
const mask = charsWithoutValidator.reverse().map((char, i) => {
if (i % 3 === 0 && i !== 0) {
return '#.'
}
return '#'
}).reverse().join('');
return `${mask}-${currentValidator}${nextValidator}`; // ad an extra char at the end to be able to type.
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-text>
</v-card-text>
<v-card-text>
<v-text-field v-model="value" :mask="mask" label="Value" validate-on-blur
></v-text-field>
</v-card-text>
</v-card>
</v-app>
</div>