I'm trying to make a simple form validation page work with vee-validate. Something appears to be broken though, and I am unsure what exactly I am doing wrong.
How am I getting the error: errors not defined.
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<div id="app">
<h1>asdfasd</h1>
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/3.0.5/vee-validate.full.min.js"></script>
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
template: '#app',
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
You seems to use veevalidate 3 instead of veeValidate 2. I have updated the veevalidate to version 2 in my answer as well as adding v-model="email_primary"
Since you have a template already, I have removed template: '#app',. Kindly see below
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<div id="app">
<h1>asdfasd</h1>
<form action='#' method='POST'>
<input v-model="email_primary" v-validate="'required|email'"
:class="{'input': true, 'is-danger': errors.has('email_primary') }"
name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.15/vee-validate.min.js"></script>
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
Here is a working fiddle. I hope my answer will help.
Related
I am trying to understand how vue works. To do that I simplify it as much as possible, hence no webpack no CDNs or any other packages (unless its a necessity).
So, Came up with this but trying to inject a simple a variable into html gives vue is undefined error.
*vue.js file is taken from npm vue package.
<html>
<head>
<script src="vue.js"></script>
<script>
new vue({
data: 'This must be injected'
}).$mount('#app');
</script>
</head>
<body>
<div id="app">
<p> {{ data }} </p>
</div>
<h1>This is a sample header</h1>
</body>
</html>
You need to have Vue load after the Dom is ready so it can find the element to attach itself to — don't put it in the head. Also it's upper-case Vue. And Data can't just be a naked property it should be a function that returns an object with your properties (it can also be an an object, but it's not recommended once the app starts getting bigger).
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p> {{ data }} </p>
</div>
<h1>This is a sample header</h1>
<script>
Vue.config.productionTip = false
new Vue({
data(){ return {
data: 'This must be injected'
}
}
}).$mount('#app');
</script>
There are a few problems in your code.
vue should be Vue
data should be an Object or Function - https://v2.vuejs.org/v2/api/#data
<html>
<head>
</head>
<body>
<div id="app">
<p> {{ myText }} </p>
</div>
<h1>This is a sample header</h1>
<script src="vue.js"></script>
<script>
new Vue({
data: {
myText: 'This must be injected'
}
}).$mount('#app');
</script>
</body>
</html>
I think the data must have an object as it's value.
<html>
<head>
<script src="vue.js"></script>
<script>
new Vue({
data: {
txt: 'This must be injected'
}
}).$mount('#app');
</script>
</head>
<body>
<div id="app">
<p> {{ txt }} </p>
</div>
<h1>This is a sample header</h1>
</body>
</html>
the event.preventDefault() doesn't work
<script type="text/javascript" src="vue.js"></script>
<div id="app">
<form v-on:submit.prevent="saveData">
<input type="text" name="test">
<button type="submit">Go</button>
</form>
</div>
<script type="text/javascript">
new Vue({
'el': '#app',
'methods':{
'saveData': function(event){
event.preventDefault();
}
}
});
</script>
.prevent modifier is sufficient. You don't have to call event.preventDefault() inside the handler.
See demo below. There are two forms, one with .prevent and one without. Notice the first just logs. The second logs and goes to another page (the form submits).
<script src="https://unpkg.com/vue"></script>
<div id="app">
<form v-on:submit.prevent="saveData">
<input type="text" name="test">
<button type="submit">Go</button>
</form>
<hr>
<form v-on:submit="saveData">
<input type="text" name="test">
<button type="submit">I WONT PREVENT</button>
</form>
</div>
<script type="text/javascript">
new Vue({
'el': '#app',
'methods': {
'saveData': function(event) {
console.log('I was called');
}
}
});
</script>
1.I am a beginner of vue.js, but when I was trying some examples, I found something uncommon. The first one is when I set id in the body, and write my js code as followed:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/semantic.css">
<script type="text/javascript" src="js/vue.js">
</script>
<title></title>
</head>
<body style="background-color:black;" id="app">
<div class="ui container" style="margin:20px;">
<div class="ui segment">
<h1>{{ title }}</h1>
<p>
{{ message }}
</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello, world!",
title: "How about you?"
}
})
</script>
</body>
</html>
And this is my result which does not show me data :
2.And the second problem is when I created an object in the data, and I refer it as followed, it also does not work in the div label.
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/semantic.css">
<script type="text/javascript" src="js/vue.js">
</script>
<title></title>
</head>
<body style="background-color:black;">
<div class="ui container" style="margin:20px;">
<div class="ui segment" id="app">
<h1>{{ article.title }}</h1>
<p>
{{ article.message }}
</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
article{
message: "Hello, world!",
title: "How about you?"
}
}
})
</script>
</body>
</html>
So I wonder if there some conflicts when I was using semanticUI and vue.js?
As a best practice, you can create a top level div#app, like this:
var app = new Vue({
el: "#app",
data: {
message: "Hello, world!",
title: "How about you?"
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<body style="background-color:black;">
<div id="app"><!-- just a wrapper for vuejs -->
<div class="ui container" style="margin:20px;">
<div class="ui segment">
<h1>{{ title }}</h1>
<p>
{{ message }}
</p>
</div>
</div>
</div>
</body>
I have an input inside a popover content like so:
JSFiddle
HTML:
<div id="vue-app">
<div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data-content='<input v-model="message"/>'>
Click Me!
</div>
<hr>
<input v-model="message"> {{ message }}
</div>
And here is JS :
new Vue({
el: '#vue-app',
data: {
message: 'I am a Text'
}
});
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
As you can see the input out of data-content binds well, but the one inside doesn't bind!
Any idea would be great appreciated.
You can use like this:
Here is the working demo: https://output.jsbin.com/mokoka
https://jsbin.com/mokoka/edit?html,js,output
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue#2.4.2"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="vue-app">
<div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true">
Click Me!
</div>
<hr>
<input type="text" v-model="message"> {{ message }}
<div id="popper-content" class="hide popper-content">
<input type="text" v-model="message">
</div>
</div>
</body>
</html>
JavaScript:
new Vue({
el:'#vue-app',
data: {
message: 'I am a Text!'
}
})
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
html: true,
content: $('#popper-content')
}).on('show.bs.popover', function() {
$('#popper-content').addClass('show')
}).on('hide.bs.popover', function() {
$('#popper-content').addClass('hide')
})
});
Vue cannot just know of html-element you dynamically create, hence your created input-element cannot be bound. If you really want to solve it this way, I think the render function can help you: https://v2.vuejs.org/v2/guide/render-function.html
However, a more elegant solution (imho) is to create the basic Vue v-if function
Html:
<div id="vue-app">
<div class="btn btn-primary" v-on:click="showPop = !showPop">Click Me!</div>
<div class="mypopover" v-if="showPop">
<p>Title</p>
<input v-model="message">
</div>
<hr>
<input v-model="message">
{{ message }}
</div>
Js:
new Vue({
el:'#vue-app',
data: {
message: 'I am a Text',
showPop: false
}
});
Just apply the bootstrap css class for styling
I found a useful Vue Package(vue-popper).
It do the same thing without using Bootstrap!
JSFiddle
<popper trigger="click" :options="{placement: 'bottom'}">
<div class="popper">
<input type="text" v-model="message">
</div>
<div slot="reference" class="btn">
Click Me!
</div>
</popper>
Cheers!
You can simply use this component, that does not destroy the popped element https://www.npmjs.com/package/#soldeplata/popper-vue
I am gonna planning to use vue.js in a web application. but it could not loaded and not fired html in browser. Please look at my below code:
<!DOCTYPE html>
<html>
<head>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
The problem is you're trying to create Vue instance before vue.js is loaded, so I think if you put your code after vue.js, your application will work fine.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>