Как обработать input во vue

Question

Я только новичок во vue и я хотел бы узнать, как можно обработать input на наличие цифр в нем через composition API.

То есть, если пользователь вписывает цифры в поле оно выделяется красным, если только текст, то все норм. Во vue не читает onchange и не видит функцию.

<script setup>
import { ref } from 'vue';

const name = ref('')
const surname = ref('')
</script>

<template>
   <input type="text" v-model="name" onchange="check()" placeholder="Имя">
   <input type="text" v-model="surname" placeholder="Фамилия">
</template>

Answer 1

Для инпута определяется событие @input, на каждый ввод в поле срабатывает проверка в методе check() где происходит проверка на цифры и установка специального флага hasNumbers, который добавляет класс :class="{ 'has-numbers': hasNumbers }" на котором висит стиль выделяющий инпут красным цветом.

   <script setup>
    import { ref } from 'vue';
    
    const name = ref('');
    const surname = ref('');
    const hasNumbers = ref(false);
    
    function check() {
      hasNumbers.value = /\d/.test(name.value);
    }
    </script>
    
    <template>
      <input type="text" v-model="name" @input="check" :class="{ 'has-numbers': hasNumbers }" placeholder="Имя">
      <input type="text" v-model="surname" placeholder="Фамилия">
    </template>

    <style>
    .has-numbers {
      color: #ff0000;
      border: 1px solid #ff0000;
    }
    </style>

БЛОГ НА HUSL

Как обработать input во vue

Ответы (1 шт):