<template>
<div class="hello">
<h1 v-text="msg">{{ msg }}</h1>
<validator name="validation">
<form novalidate>
<input type="text" v-model="comment" v-validate:comment="{ minlength: 16, maxlength: 128 }">
<div>
<span v-show="$validation.comment.minlength">Your comment is too short.</span>
<span v-show="$validation.comment.maxlength">Your comment is too long.</span>
</div>
<input type="submit" value="send" v-if="valid">
</form>
</validator>
</div>
</template>
<script>
import Vue from 'vue'
var Hello = Vue.extend({
data () {
return {
// note: changing this line won't causes changes
// with hot-reload because the reloaded component
// preserves its current state and we are modifying
// its initial state.
msg: 'Hello World!'
}
}
})
export default Hello
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
color: #42b983;
}
</style>
What is actually happening?
I just started to learn vue-validator
how to solve the problem
vue & vue-validator version
"vue": "^1.0.21", "vue-validator": "^2.1.5"
Steps to reproduce
in mian.js
in App.vue
in Hello.vue
What is actually happening?
I just started to learn vue-validator how to solve the problem