Vue 2 with Component.vue & Vue-Router 2 & Vue-Validator 3 not working
yang5664 opened this issue · comments
Yang Hsuan-ming commented
vue & vue-validator version
"vue": "^2.0.1",
"vue-router": "^2.0.0",
"vue-validator": 3.0.0-alpha.1
Reproduction Link
Steps to reproduce
App.vue
<template>
<div id="app">
<router-view></router-view>
<router-link :to="{ name: 'test' }">Test</router-link>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#app {
color: #2c3e50;
margin-top: -100px;
max-width: 600px;
font-family: Source Sans Pro, Helvetica, sans-serif;
text-align: center;
}
#app a {
color: #42b983;
text-decoration: none;
}
</style>
ValidTest2.vue
<template>
<div>
<validator name="validation">
<form novalidate>
message: <input type="text" v-fieldname="message" v-validate:message="{ required: true, minlength: 8 }"><br />
<div>
<p v-if="$validation.message.required">Required your message.</p>
<p v-if="$validation.message.minlength">Too short message.</p>
</div>
</form>
</validator>
</div>
</template>
<script>
export default{
data () {
return {
message: 'hello vue'
}
}
}
</script>
app.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueValidator from 'vue-validator'
Vue.use(VueValidator)
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{
path: '/test',
component: require('./components/ValidTest2.vue'),
name: 'test'
},
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
What is Expected?
how can make it work?
What is actually happening?
[Vue warn]: Property or method "$validation1" is not defined on the instance but referenced during render.
Make sure to declare reactive data properties in the data option.
(found in anonymous component at ValidTest2.vue)
Jonas Hauß commented
As far as I know, they're going to remove the validator element.
Have a look at the 3.0 release examples.
The validation and validity components are your new validation components.
event-姚佳 commented
i have the somme problem..
Yang Hsuan-ming commented
You may try this sample code
<template v-fieldset="Test">
<transition name="fade" mode="out-in" appear>
<div class="login_bg">
<div class="login_logo">
</div>
<validation name="login" @submit="handleSubmit">
<div class="login_area">
<h4>請使用下列方式登入帳號:</h4>
<div class="form-group">
<label class="sr-only" for="email">E-mail帳號</label>
<validity ref="email" field="email" :validators="{
required: { message: '請輸入Email !!' }
}">
<input type="text" class="form-control" id="email" placeholder="輸入E-mail帳號" @focusout="handleValidate">
</validity>
</div>
<div class="form-group">
<label class="sr-only" for="password">密碼</label>
<validity ref="password" field="password" :validators="{ required: { message: '請輸入密碼 !!' } }">
<input id="password" type="password" class="form-control" placeholder="輸入密碼" @focusout="handleValidate">
</validity>
</div>
<button type="submit" class="btn btn-default login_btn":disabled="!validated || !valid">登入</button>
<div class="errors">
<p v-for="error in errors">{{error.message}}</p>
</div>
<div class="login_bottom_area">
</div>
</div>
</validation>
</div>
</transition>
</template>
<script>
import { mapValidation } from 'vue-validator'
import { mapActions, mapGetters } from 'vuex'
export default{
data () {
return {
message: 'hello vue',
validated: false
}
},
computed: {
...mapGetters({
}),
...mapValidation({
valid: '$validation.login.valid',
errors: '$validation.login.errors'
})
},
validators: {
confirm: function (val) {
return val === this.$refs.password.$el.value
}
},
methods: {
...mapActions({
}),
handleSubmit: function (e) {
if (!this.validated || !this.valid) {
e.preventDefault()
}
},
handleValidate: function (e) {
var self = this
e.target.$validity.validate(function () {
self.validated = true
})
}
}
}
</script>
UrchinZao commented
it can't insert components in the ....