自定义 Vue Material md-Input 如何获取 isDirty 或 isTouched [英] Custom Vue Material md-Input how to get isDirty or isTouched
问题描述
我想创建自己的 CustomMdInput，并进行基本验证.我想实现一个以这种方式工作的输入:
我使用
<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-输入><span class="md-error">Imię jest obowiązkowe</span></md-field></模板><脚本>导出默认{name: 'FpInput',道具: {价值: {要求:真实},ID: {要求:真实，类型:字符串},必需的: {默认值:假，类型:布尔型}},方法: {发射值(){this.$emit('input', this.$refs[this.id].value)}}}<样式范围></风格>
但我不知道如何检查此输入是Dirty 还是isTouched，以及如何设置此输入的Validity 以在提交后检查isFormValid
举个例子
const MyInput = {模板:'#myInput'，道具:['价值']，数据 () {返回 {输入值:this.value，肮脏的:假的，感动:假的，无效:假}},方法: {证实 () {if(this.inputValue.length<5){this.inValid = 真this.dirty = 真}别的{this.inValid = 假this.dirty = falsethis.touched = false}},发射值(){this.validate()this.$emit('input', this.inputValue);}}}var app = new Vue({el: '#app',组件:{MyInput}，数据 () {返回 {}}})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><;/脚本><div id="应用程序"><my-input value="5"></my-input><script type="text/x-template" id="myInput"><div><input v-model="inputValue" @input="emitValue()" @touchstart="touched = true" @mousedown="touched = true"/><span v-show="(dirty || touch) && inValid">必须至少有 5 个字母</span><div>脏:{{dirty}}</div><div>touched:{{touched}}</div><div>inValid:{{inValid}}</div>
</script>
给你一个完整的例子
const MyInput = {模板:'#myInput'，道具:['价值']，数据 () {返回 {输入值:this.value，肮脏的:假的，感动:假的，无效:假}},方法: {证实 () {if(('' + this.inputValue).length<5){this.inValid = 真this.dirty = 真}别的{this.inValid = 假this.dirty = falsethis.touched = false}},发射值(e){this.validate()this.$emit('input', this.inputValue);}},创建(){this.inputValue = this.value;this.validate();this.dirty = false;}}var app = new Vue({el: '#app',组件:{MyInput}，数据 () {返回 {inputList: new Array(4).fill('').map(o=>({val:5}))}},方法: {提交 () {if(this.$refs.inputs.some(o=>o.inValid)){alert('你有一些输入无效')}别的{alert('提交数据...')}}}})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><;/脚本><div id="应用程序"><form @submit.prevent="提交"><my-input ref="inputs" v-for="item in inputList" v-model="item.val"></my-input><button type="submit">submit</button></表单><script type="text/x-template" id="myInput"><div><input v-model="inputValue" @input="emitValue()" @touchstart="touched = true"/><span v-show="(dirty || touch) && inValid">必须至少有 5 个字母</span>
</script>
