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
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 am new to Vue.js. I want to add header, content and footer to the page using components. I get an extra div in the code - how can I remove it?
<!doctype html>
<html class="h-full" lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<header></header>
<main role="content"></main>
<footer></footer>
</div>
<script src="js/app.js"></script>
</body>
</html>
Additional question: how to make another layout for the login page? There will be no header and footer on this page.
Source files
index.html
<!doctype html>
<html class="h-full" lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
App.vue
<template>
<Layout>
<template v-slot:header>
<Header/>
</template>
<router-view></router-view>
<template v-slot:footer>
<Footer/>
</template>
</Layout>
</template>
<script>
import Layout from './layouts/TheLayout'
import Header from './components/TheHeader'
import Footer from './components/TheFooter'
export default {
components: {
Layout,
Header,
Footer
},
}
</script>
TheLayout.vue
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {}
</script>
<div> can not be removed.
You can use computed properties for another layout.
<template>
<Layout>
<template #header>
<Header v-if="isBoard"/>
</template>
<router-view></router-view>
<template #footer>
<Footer v-if="isBoard"/>
</template>
</Layout>
</template>
<script>
import Layout from './layouts/BaseLayout'
import Header from './components/TheHeader'
import Footer from './components/TheFooter'
export default {
computed: {
isBoard() {
return this.$route.name === 'Board'
}
},
components: {
Layout,
Header,
Footer
},
}
</script>
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!
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
}
})
I have this nasty display on some elements with bootstrap3
the black triangle is in the MIDDLE of the tooltip.
My placement is set to "auto"
and even removing all my css and all js (keeping only bootstrap and css) I have this problem
// I just keep this to test and still have problem
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
Here is the way it is called (in the footer.php)
(function() {
bootbox.setDefaults({ locale: "en"});
$('[title]').tooltip({
placement:"auto"
});
Here is the FULL Page
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label title="Main-Stage" class="btn btn-default active" >
<input type="radio" name="options" checked >Main-Stage
</label>
<label title="Chat with DJ" class="btn btn-default" >
<input type="radio" name="options" > DJ
</label>
<label title="Chat with Manager" class="btn btn-default">
<input type="radio" name="options" > Manager
</label>
</div>
<script>
(function() {
$('[title]').tooltip({
placement:"auto"
});
})();
</script>
</body>
</html>
FIDDLE:
http://jsfiddle.net/a279b885/