How to fix double characters when typing in a text box?

Question

JavaScript

Good afternoon. I am new to vue and js.
I'm trying to implement on vue in conjunction with element-ui the replacement of Russian characters with Latin characters in accordance with the keyboard layout. Roughly speaking, I want to enter only the Latin alphabet with numbers in the field.
It turned out so far this jsfiddle.net/9sd1xbuv/13
The replacement occurs, but for some reason the character that you entered is added.
Although if you add the .prevent modifier to @keypress.native it seems to work, but then the validation will not work.
Either I was smart, or maybe something is wrong in the component?

Answer 1

Instead of keypress, the input event should be handled. You don’t need to enter the value (in the sense - through element.value) into the element with your hands, let v-model do it. The very logic of replacing characters is wildly overcomplicated, I don’t see the point. Here 's the corrected version for you.

Answer 2

Nevermind!
Got it, bitches

Answer 3

Nightmare.