Vee-执行配置时显示BlankPage的验证

Question

我使用Vue3.0，也使用Vee-validate来验证我的表单。但我不知道为什么它一直显示空白页面只是like in this picture

我已经按照文档中所说的做了，下面是我的代码

<form class="wrap" id="signup-form col-lg-5" @submit.prevent="processForm">
                    <div class="row mb-5">
                        <router-link :to="{'name': 'Home'}">
                            <span class="iconify" data-icon="ion:return-up-back-outline" data-width="25" data-height="25"></span>
                            <button class="btn">Back</button>
                        </router-link>
    
                    </div>
                    <!-- full name -->
                    <div class="form-group row">
                        <label for="name">Full Name <span class="text-danger">*</span></label>
                        <ValidationProvider rules="positive|odd" v-slot="err">
                        <input type="text" class="form-control" v-model.trim="name">
                        <span>{{ err.errors[0] }}</span>
                        </ValidationProvider>
                    </div>
      
                    <!-- submit button -->
                    <div class="row d-flex align-items-center">
                        <button type="submit" class="btn btn-outline-dark col-sm-4">Submit</button>
                        <p style="cursor:pointer;" class="col-sm-7">
                            <router-link :to="{name:'Login'}">Has an account? Login</router-link>
                        </p>
                    </div>
                </form>

这是我的脚本

<script>
import { ValidationProvider } from 'vee-validate';
import { extend } from 'vee-validate';

extend('odd', value => {
  return value % 2 !== 0;
});
extend('positive', value => {
  return value >= 0;
});

export default {
  name: 'RegisterForm',
  components: {
      ValidationProvider
  },
  data: function(){
      return{
          name: '',
      }
  },
  methods: {
    processForm() {
        this.$emit('form-submit', 
        {
            'name': this.email,
            'password': this.password,
        })
    }
  }
}
</script>

我应该从代码中修改什么？顺便问一下，Vee-Validator应该在main.js中分配吗？

Answer 1

看起来您使用的是vee-validate v3.x，它与Vue 3不兼容

vee-validate v4是最近发布的，它支持Vue 3，但使用了完全不同的API

https://vee-validate.logaretm.com/v4/