Переместить Vue проверки правильности ввода в компоненте в метод - PullRequest
Новая
       13

Переместить Vue проверки правильности ввода в компоненте в метод

0 голосов
/ 28 апреля 2020

У меня есть Vue компонент enet для моего поля ввода. Я добавил некоторую проверку, которая гарантирует, что добавляются только цифры. Я добавил это в oninput.

Я хотел бы переместить это в метод, чтобы я мог добавить больше проверок (например, если Тип! == число)

Это работает хорошо, но со встроенной проверкой: 

        <input
            v-bind="$attrs"
            v-on="{
                ...$listeners,
                input: event => $emit('input', event.target.value)
            }"
            oninput="this.value = Math.abs(this.value)"
        />

Вот как я хотел бы (но текущая проверка не работает): 

        <input
            v-bind="$attrs"
            v-on="{
                ...$listeners,
                input: event => handleInput(event.target.value)
            }"
        />

methods: {
   handleInput(value) {
        console.log(value);
        // 1st emit
        this.$emit("input", value);

        // 2nd Validate -- Not working...
        this.value = Math.abs(this.value);
    }
}

Любые идеи о том, как я получаю this.value = Math.abs (this.value); вернуть обратно на вход?

ОБНОВЛЕНИЕ

Благодаря полезному комментарию я добился некоторого прогресса. Приведенный ниже код работает для первого символа, но не для текущих символов.

Если числа набраны, то проверка проходит true и ввод вводится. Если набран 1 символ (например, a), то мы выдадим цифру 0. Если введен второй символ, то будет выпущен символ (например, нажмите b, и теперь ввод 0b)

Я вижу this. $ emit ("input", 0) срабатывает, поэтому не уверен, почему char испускается. 

    methods: {
    validateInput(value) {
        // if it type isnt set as a number then leave
        if (this.type != "number") {
            return true;
        }
        // check if value a number
        if (Math.abs(value)) {
            return true;
        }

        return false;
    },
    handleInput(value) {
        if (this.validateInput(value)) {
            this.$emit("input", value);
        } else {
            this.$emit("input", 0);
        }
    }
}

1 Ответ

0 голосов
/ 28 апреля 2020

Если вы хотите проверить значение перед отправкой входного события, вы можете сделать это следующим образом: 

 methods: {
    validateInput(value) {
        if (typeof value !== 'number') { return false; } // check if it's not a string
        if (value !== Math.abs(value)) { return false; } // check if value is positive
        return true
    }
    handleInput(value) {
        if (this.validateInput(value)) { this.$emit("input", value); }
        this.$emit("input") // if value is not a valid input, you may want to do nothing, or emit merely that the event happened.
    }
}

Лучшим способом сделать пользовательский ввод будет использование value проп вход и связать его со свойством динамического c в вашем компоненте, например, с помощью v-model="value". Интересный факт: v-model имеет модификатор v-model.number, который будет делать именно то, что вам нужно.

Единственное предостережение в том, что вы не можете напрямую изменять реквизиты, поэтому вам нужно использовать вычисляемое свойство в качестве способа автоматической обработки «получения и настройки» формы. значение. 

// CustomInput.vue

<template>
  <input v-bind="$attrs" v-on="$listeners" v-model.number="localValue" />
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true,
    }
  }
  computed: {
    localValue: {
      get() { return this.value; }
      set(newVal) { this.$emit('input', newVal); }
    }
  }
}
</script>

Вам не нужно создавать пользовательский компонент для этого случая. Вы можете просто использовать v-model.number в родительском, и это будет работать. Как только ваши входные данные станут более сложными, вы захотите немного изменить метод set на set(newVal) { if (this.validateInput(newVal)) {this.$emit('input', newVal);} }, определив свой собственный метод validateInput.

Если вы обнаружите, что пишете много разных проверок для различного использования случаи, посмотрите на библиотеки как Vuelidate и VeeValidate

...