Пользовательский Vue Материал MD-Input, как получить isDirty или isTouched - PullRequest
Новая
       50

Пользовательский Vue Материал MD-Input, как получить isDirty или isTouched

0 голосов
/ 08 мая 2018

Я хотел бы создать свой собственный CustomMdInput с базовой проверкой. Я хотел бы реализовать ввод, который работает таким образом:

Я использую <fp-input v-model="test"></fp-input>, и важно, чтобы, когда этот ввод был необходим, когда кто-то щелкнул по нему или что-то набрал (поворачивает свойство 'touch' или 'dirty'), а затем расфокусировал этот ввод и перейдите к другой вход, предыдущий остается недействительным со всей проверкой, поэтому у меня есть что-то вроде этого: 

<template>
  <div class="md-layout-item">
    <md-field>
      <label :for="id">Imię</label>
      <md-input :name="id" :id="id" :required="required" v-model="value" :ref="id" @input="emitValue()"></md-input>
      <span class="md-error">Imię jest obowiązkowe</span>
    </md-field>
  </div>
</template>

<script>
export default {
  name: 'FpInput',
  props: {
    value: {
      required: true
    },
    id: {
      required: true,
      type: String
    },
    required: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    emitValue () {
      this.$emit('input', this.$refs[this.id].value)
    }
  }
}
</script>

<style scoped>

</style>

Но я не знаю, как проверить, является ли этот вход грязным или isTouched, и как я могу установить валидность этого входа для проверки isFormValid после отправки

1 Ответ

0 голосов
/ 09 мая 2018

приведу пример 

const MyInput = {
			template: '#myInput',
			props: ['value'],
			data () {
				return {
					inputValue: this.value,
					dirty: false,
					touched: false,
					inValid: false
				}
			},
			methods: {
				validate () {
					if(this.inputValue.length<5){
						this.inValid = true
						this.dirty = true
					}else{
						this.inValid = false
						this.dirty = false
						this.touched = false
					}
				},
				emitValue() {
					this.validate()
					this.$emit('input', this.inputValue);
				}
			}
		}

		var app = new Vue({
		  el: '#app',
		  components: {MyInput},
		  data () {
		    return {
		    }
		  }
		})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<div id="app">
	  <my-input value="5"></my-input>
	</div>

	<script type="text/x-template" id="myInput">
		<div>
      		<input v-model="inputValue" @input="emitValue()" @touchstart="touched = true" @mousedown="touched = true"/>
			<span v-show="(dirty || touched) && inValid">must be at least 5 letters</span>
			<div>dirty:{{dirty}}</div>
			<div>touched:{{touched}}</div>
			<div>inValid:{{inValid}}</div>
		</div>
	</script>

приведу полный пример 

const MyInput = {
  template: '#myInput',
  props: ['value'],
  data () {
    return {
      inputValue: this.value,
      dirty: false,
      touched: false,
      inValid: false
    }
  },
  methods: {
    validate () {
      if(('' + this.inputValue).length<5){
        this.inValid = true
        this.dirty = true
      }else{
        this.inValid = false
        this.dirty = false
        this.touched = false
      }
    },
    emitValue(e) {
      this.validate()
      this.$emit('input', this.inputValue);
    }
  },
  created () {
    this.inputValue = this.value;
    this.validate();
    this.dirty = false;
  }
}

var app = new Vue({
  el: '#app',
  components: {MyInput},
  data () {
    return {
      inputList: new Array(4).fill('').map(o=>({val:5}))
    }
  },
  methods: {
    submit () {
      if(this.$refs.inputs.some(o=>o.inValid)){
        alert('you have some input invalid')
      }else{
        alert('submit data...')
      }
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<div id="app">
  <form @submit.prevent="submit">
      <my-input ref="inputs" v-for="item in inputList" v-model="item.val"></my-input>
    <button type="submit">submit</button>
  </form>
</div>

<script type="text/x-template" id="myInput">
  <div>
        <input v-model="inputValue" @input="emitValue()" @touchstart="touched = true"/>
    <span v-show="(dirty || touched) && inValid">must be at least 5 letters</span>
  </div>
</script>
...