滚动到使用b-form中的Vue Validate出现的第一个错误

Question

使用Vue Validate提交表单以在引导表单(b-form(中进行验证时，尝试滚动到第一个错误

Answer 1

我想你正在寻找这样的东西-

const app = new Vue({
el:'#app',
data:{
errors:[],
name:null,
age:null,
movie:null
},
methods:{
checkForm:function(e) {
this.$refs.errorP.scrollIntoView();
if(this.name && this.age) return true;
this.errors = [];
if(!this.name) this.errors.push("Name required.");
if(!this.age) this.errors.push("Age required.");

e.preventDefault();

}
}
})

input,select {
margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="app" @submit="checkForm" action="/something" method="post">
<div ref="errorP">
<p v-if="errors.length" >
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
</div>
<div style="height: 1000px;">
Scroll to the bottom to see the form
</div>
<p>
<label for="name">Name<label>
<input type="text" name="name" id="name" v-model="name">
</p>
<p>
<label for="age">Age<label>
<input type="number" name="age" id="age" v-model="age" min="0">
</p>
<p>
<label for="movie">Favorite Movie<label>
<select name="movie" id="movie" v-model="movie">
<option>Star Wars</option>
<option>Vanilla Sky</option>
<option>Atomic Blonde</option>
</select>
</p>
<p>
<input type="submit" value="Submit">  
</p>
</form>

https://jsfiddle.net/anupdg/j24xt7rd/1/