Vue: присоединение события @keyup/@input к свойству данных прерывает ввод формы

Вам нужно заменить :value на v-model для двусторонней привязки данных, и вместо того, чтобы напрямую изменять свойство text, добавьте локальное свойство (например, localText). Я бы также использовал свойство computed для вычисления длины вместо события для лучшей читабельности. Итак, что-то вроде этого:

<template>
    <div>
        <label class = "label" :class = "{ 'label-large' : large }" v-if = "label">
            {{ label }} <sup class = "is-required" v-if = "isRequired">Req</sup>
        </label>
        <input class = "input-control" :class = "{ 'input-large' : large }" :maxlength = "maxLength" :placeholder = "placeholderText" ref = "input" v-model = "localText" @change = "formatValue($event.target.value)" />
        <div class = "flex text-x-small-regular mt-2" :class = "large ? 'px-4' : 'px-2'" v-if = "maxLength || validationFailed">
            <div class = "validation-message">
                <template v-if = "validationFailed">{{ validationMessage }}</template>
            </div>
            <div class = "character-count" v-if = "maxLength">
                <span :class = "characterCountWarningStyle">{{ characterCount }}</span> / {{ maxLength }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        isRequired: {
            default: false,
            required: false,
            type: Boolean
        },
        label: {
            required: false,
            type: String
        },
        large: {
            default: false,
            required: false,
            type: Boolean,
        },
        maxLength: {
            required: false,
            default: 10,
            type: Number
        },
        placeholder: {
            required: false,
            type: String
        },
        text: {
            required: false,
            type: String
        },
        validationMessage: {
            default: "Required field.",
            required: false,
            type: String
        }
    },
    data() {
        return {
            localText: this.text || '',
            validationFailed: false,
            value: undefined
        }
    },
    computed: {
        characterCount() {
            return this.localText.length;
        },
        characterCountWarningStyle() {
            return "" // Simplified.
        },
        placeholderText() {
            return "" // Simplified.
        }
    },
    methods: {
        formatValue(value) {
            this.validationFailed = false;

            if (value) value = value.trim();

            this.validate(value);
        },
        validate(value) {
            if (this.isRequired && !value) {
                this.validationFailed = true;
            }

            this.$emit('update', value);
        }
    }
}
</script>

Обновление characterCount в обработчике keyup запускает повторную визуализацию всего компонента, чтобы отобразить новое значение интерполяции строки characterCount в шаблоне. Рендеринг включает <input>, значение которого привязано к text. Если text является пустой строкой или нулевым значением, <input> эффективно очищается на keyup.

Чтобы решить эту проблему, используйте локальную копию реквизита text, которую можно изменить, и привяжите ее к <input> объекта v-model.

1. Создайте свойство данных (с именем "value") и наблюдатель на реквизите text, который копирует text в value:

   export default {
     props: {
       text: {/*...*/},
     },
     data() {
       return {
         value: ''
       }
     },
     watch: {
       text(newText) {
         this.value = newText
       }
     },
   }
   

2. Используйте новое свойство value в качестве v-модели <input> :

   <input v-model = "value">
   

3. Удалите обработчик keyup и свойство данных characterCount и вместо этого используйте вычисляемую опору, которая возвращает длину value:

   export default {
     computed: {
       characterCount() {
         return this.value.length
       }
     },
   }