vee-validate 表单验证

安装

npm install vee-validate --save

在main.js引入

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

使用

<template>
  <div class="hello">
    <form @submit.prevent="addSkill">
      <input type="text" placeholder="please enter your skills" v-model="skill" v-validate="'min:5'" name="skill">
      <p v-if="errors.has('skill')" class="alert">{{errors.first('skill')}}</p>
    </form>
    <ul>
      <li v-for="(data,index) in skills" :key="index">{{data.skill}}</li>
    </ul>
  </div>
</template>

实现当不满足条件无法插入

export default {
  name: 'HelloWorld',
  data(){
    return {
      skills:[
        {"skill":"vue.js"},
        {"skill":"fronted developer"}
      ],
      skill:""
    }
  },
  methods:{
    addSkill(){
      this.$validator.validateAll().then((result)=>{
        if(result){
          this.skills.push({skill:this.skill})
          this.skill=''
        }else{
          console.log('Not valid');
        }        
      })     
    }
  },
}