Значение компонента поля ввода потеряно после запуска функции проверки на размытие - PullRequest
Новая
       17

Значение компонента поля ввода потеряно после запуска функции проверки на размытие

0 голосов
/ 26 апреля 2019

У меня проблема при попытке запустить проверку для компонента поля ввода. Вот код

Компонент InputField для родительского компонента 

InputField(:title="'Name'", :type="'text'", :id="'full-name'", :placeholder="'-- Insert your name --'", v-model="fullName", :validation="validateName", :isvalid="validName")

исходное состояние 

data () {
  return {
    fullName: '',
    validName: {
        status: null,
        message: null
    }
  }
}

и вот компонент InputField 

<template lang="pug">
  .form-group
    div#input-field
      h4
        strong {{ title }}
      input.form-control(:type="type", :id="id", :aria-describedby="id", :placeholder="placeholder", :value="input", :maxlength="length", @change="handleInput($event)" @blur="validation ? validation($event.target.value) : ''")
      span(v-if="isvalid && isvalid.status === false" style="font-size: 12px; color: red;") {{ isvalid ? isvalid.message : '' }}
</template>
<script>
export default {
  props: ['value', 'title', 'type', 'id', 'placeholder', 'input', 'onchange', 'index', 'card', 'switchbutton', 'switchtoggle', 'message', 'freshgraduate', 'length', 'validation', 'console', 'isvalid'],
  methods: {
    handleInput (event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

и вот функция проверки на родительском компоненте 

validateName (value) {
      if (value) {
        let regexp = /\d+/
        if (regexp.test(value)) {
          console.log(this.fullName)
          this.validName = {
            status: false,
            message: 'You can't input numbers'
          }
        } else {
          console.log(this.fullName)
          this.validName = {
            status: null,
            message: null
          }
        }
      } else {
        console.log(this.fullName)
        this.validName = {
          status: false,
          message: 'Please insert your name'
        }
      }
    }

проблема в том, что когда я печатаю на InputFiled и затем размываю компонент, значение на InputField теряется, но оно не теряется из данных состояния, значение все еще сохраняется, но каким-то образом оно отсутствовало в InputField и проверке это тоже работа. я определенно что-то здесь упускаю, кто-нибудь может помочь скажите мне, если я должен включить больше кода

...