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.
The span tag appears as raw html:
Markup:
<!DOCTYPE html>
<html>
<head>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
</head>
<body>
<script type='text/JavaScript'>
Vue.use(VeeValidate); // good to go.
new Vue({
el: '#app',
data: {
email_primary: null
}
});
</script>
<div id="app">
<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>
</body>
</html>
Fiddle.
What do I need to do to make vee-validate work as expected?
The issue(s)
It appears to have been a few things, but the main culprit was that the type attribute on all the script tags were set to text/JavaScript which is invalid. Its best to either not set the type, or if you do, set it to text/javascript.
Also, since you're utilizing div#app as a template rather than just the root element, I added in the proper attributes.
Finally, always load your javascript after your html.
Fixed Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate); // good to go.
new Vue({
el: "#app",
template: '#app',
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
Also, a working jsfiddle.
I hope this helps!
Related
I have a problem with the clearble input because then when the input lost the focus then the focus goes to the (x) and no to the other input
I want the the (x) button doesn't have a focus
<q-input outlined clearable v-model="user.surname" type="text" label="Surname" :rules="[val => !!val || 'Surename is required']" />
#marg {
padding:50px
}
<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "#1.14.0")
-->
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar#1.14.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Add the following at the end of your body tag -->
<script src="https://cdn.jsdelivr.net/npm/vue#^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#1.14.0/dist/quasar.umd.min.js"></script>
<div id="q-app">
<template>
<q-layout>
<q-page-container>
<q-page class="window-height">
<div id="marg"></div>
<div class="q-gutter-md">
<q-input clearable filled v-model="text" label="Filled" />
</div>
<spam>when you tab in the first input the focus doesn't goes to the seccond input inmedatly</spam>
<div class="q-gutter-md">
<q-input clearable filled v-model="text" label="OTHER" />
</div>
</q-page>
</q-page-container>
<q-layout>
</template>
</div>
<script>
new Vue({
el: '#q-app',
data: function () {
return {
text: 'Write me and then tab me',
}
},
methods: {},
// ...etc
})
</script>
</body>
</html>
thanks guys
Check out the second example from Clearable input
<q-input color="orange" filled v-model="text" label="Label">
<template v-if="text" v-slot:append>
<q-icon name="cancel" #click.stop="text = null" class="cursor-pointer" />
</template>
</q-input>
You have more control if you're using scoped slots. You could even add a tabindex attribute.
I'm new on vue.js but I can not understand why it still says {{ title }} instead Hello world!
new Vue({
el:'#app',
data: {
title:"Hello World!"
}
});
<html>
<head>
<title></title>
</head>
<body>
<div id="#app">
{{ title }}
</div>
<script src="/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</body>
</html>
I can not understand what is wrong but I'm just copying and pasting from tutorial
You have to remove the # in <div id="#app">
Here is the full code :
new Vue({
el:'#app',
data:
{
title:"Hello World!"
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<p> {{ title }} </p>
</div>
<script src="script.js"></script>
</body>
</html>
<html>
# means id, you don't need to put id="#app", that's repetitive.
Besides that, you should load vue before you use new Vue.
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
{{ title }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data() {
return {
title: "Hello World"
}
}
});
</script>
</body>
</html>
I am very new to using VueJS and was wondering if there is a way to only show a button (that contains a slot) to only show if there is a button value given to the slot.
I'm using BootstrapVue Modals and the code is as follows:
I was not able to successfully get the modal running in the snippet but a screenshot of the opened modal is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<b-btn #click="showModal" class="modalBtn">
<slot name="modalOpenBtn">Open Me</slot>
</b-btn>
<b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
<h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
<p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>
<div slot="modal-footer" class="w-100 d-flex align-items-center">
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalCloseBtn">btn 1</slot>
</b-btn>
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalOkBtn">btn 2</slot>
</b-btn>
</div>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
components: { App },
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
});
</script>
</body>
</html>
You can conditonally render any element with Vues v-if directive:
// generic
<button v-if="myBooleanCondition">...</button>
// exmaple
<button v-if="something == true">...</button>
https://v2.vuejs.org/v2/guide/conditional.html
I can't understand should I create new instance of vue, or I can use one instance and put in it all needed components. If yes, how I can do it. Here is my code:
window.onload = function() {
var loginMenu = Vue.extend({
template: `
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
`
})
var pageFooter = Vue.extend({
template: `
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
`
})
// register it with the tag <example>
Vue.component('loginmenu', loginMenu),
Vue.component('pagefooter', pageFooter)
new Vue({
el: '#loginmenu' //how pass another templates here??
})
}
In your main file, for example index.html, add a main js file, app.js in your app.js include all of your components. Something like this
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>
<loginmenu></loginmenu>
<pagefooter></pagefooter>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var loginMenu = Vue.extend({
template: `
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
`
})
var pageFooter = Vue.extend({
template: `
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
`
})
// register it with the tag <example>
Vue.component('loginmenu', loginMenu),
Vue.component('pagefooter', pageFooter)
new Vue({
el: 'body',
components: {
'loginmenu': loginMenu,
'pagefooter', pageFooter
}
})
Can anybody construct a jsfiddle where a dojox.mobile.Heading is positioned with fixed="bottom"?
If I write the following Code (example from here), the bottom Heading is not positioned bottom.
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">View Header Bar</h1>
<h1 data-dojo-type="dojox.mobile.Heading" fixed="bottom">View Footer Bar</h1>
</div>
This one is working for me (http://jsfiddle.net/G8QkC/53/):
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/mobile/deviceTheme.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
require(["dojox/mobile/ScrollableView",
"dojox/mobile/Heading"], null);
</script>
</head>
<body>
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">View Header Bar</h1>
<h1 data-dojo-type="dojox.mobile.Heading" fixed="bottom">View Footer Bar</h1>
</div>
</body>