kazupon / vue-validator

:white_check_mark: Validator component for Vue.js
MIT License
2.19k stars 431 forks source link

use <validator> in components is error #291

Closed masterzhang closed 8 years ago

masterzhang commented 8 years ago

vue & vue-validator version

"vue": "^1.0.21", "vue-validator": "^2.1.5"

Steps to reproduce

in mian.js

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import VueValidator from 'vue-validator'
/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App },
  http: {
    header: {
      'Content-Type': 'application/json'
    }
  }
})
Vue.use(VueResource)
Vue.use(VueValidator)

in App.vue

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }
}
</script>

in Hello.vue

<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?

default

I just started to learn vue-validator how to solve the problem

masterzhang commented 8 years ago

change this

Vue.use(VueResource)
Vue.use(VueValidator)
new Vue({
  el: 'body',
  components: { App },
  http: {
    header: {
      'Content-Type': 'application/json'
    }
  }
})