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

<template>
  <div>
    <b-form @submit="submitForm" ref="myForm">
      <!-- 表单元素 -->
    </b-form>
  </div>
</template>

<script>
export default {
  methods: {
    submitForm() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
        } else {
          // 表单验证失败，滚动到第一个错误
          const firstError = document.querySelector('.is-invalid')
          if (firstError) {
            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' })
          }
        }
      })
    }
  }
}
</script>

<template>
  <div>
    <b-form @submit="submitForm" ref="myForm">
      <b-form-input
        v-model="name"
        :state="!$v.name.$error && $v.name.$dirty ? true : null"
        :class="{'is-invalid': $v.name.$error}"
        placeholder="请输入姓名"
      ></b-form-input>
      <div v-if="!$v.name.required" class="invalid-feedback">姓名不能为空</div>
    </b-form>
  </div>
</template>