How to toggle vue components
0
I have a main App.vue file, where I have placed elements like the navigation bar. The remainder of the content is rendered by vue-router. I'm trying to also place a series of modals on this file such that the modals can be accessed on any route, as soon as the corresponding link on the nav bar is clicked. I'm having trouble figuring out how to toggle the components to show and fade in (fade in -> I'm using bootstraps modals.The $ identifier for jQuery is causing issues and is not being recognised )
Any ideas?
APP.VUE
<template>
<nav class="navbar navbar-expand-lg px-0" id="navbar" v-else>
<a href="#" class='col-md-2 text-center py-0'>
<img src="./assets/4.png" id='site-logo'>
</a>
<div class="d-md-flex w-100">
<div class="d-md-flex flex-1">
...
</div>
<div class="d-md-flex flex-1" style='justify-content: flex-end'>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a class='text-white'>Login</a>
</p>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a href='/register' class='text-white'>Register</a>
</p>
</div>
</div>
</nav>
<!-- MODALS -->
<!-- LOGIN MODAL -->
<LoginModal />
<!-- -->
<router-view/>
</div>
</template>
<script>
import LoginModal from '@/components/modals/loginModal';
export default {
name: 'App',
components: {
'LoginModal': LoginModal
},
data () {
return {
}
},
...
}
</script>LOGIN MODAL
<template>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<p class="font-weight-bold text-white h5 text-center text-uppercase">Login</p>
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder='Username...'>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder='Password...'>
</div>
<div class="form-group text-center my-4">
<input type="button" value="Submit" class='rounded'>
</div>
</form>
<p class="text-white text-center small">
Forgot Password?
<br>
<span style='color: #c4b2fe'>or</span>
<br>
Register a new account
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'loginModal',
data () {
return {
}
},
mounted () {
}
}
</script>
<style scoped>
.block {display: block}
.modal-body {height: 50%}
.modal-body p:nth-child(1) {margin: 40px 0;}
.modal-content {background-color: #4855d8;}
.modal-content input {
background-color: #252b6e;
border: none;
font-weight: bold;
color: #b6b4b7;
font-size: 14px;
}
.modal-content input[type='button'] {
color: white;
margin: auto;
padding: 8px;
text-align: center;
cursor: pointer;
background-color: #080715;
width: 120px;
}
</style>vue.js bootstrap-4 bootstrap-modal
asked Nov 15 '18 at 9:35
LorzaLorza
408
add a comment |
0
I have a main App.vue file, where I have placed elements like the navigation bar. The remainder of the content is rendered by vue-router. I'm trying to also place a series of modals on this file such that the modals can be accessed on any route, as soon as the corresponding link on the nav bar is clicked. I'm having trouble figuring out how to toggle the components to show and fade in (fade in -> I'm using bootstraps modals.The $ identifier for jQuery is causing issues and is not being recognised )
Any ideas?
APP.VUE
<template>
<nav class="navbar navbar-expand-lg px-0" id="navbar" v-else>
<a href="#" class='col-md-2 text-center py-0'>
<img src="./assets/4.png" id='site-logo'>
</a>
<div class="d-md-flex w-100">
<div class="d-md-flex flex-1">
...
</div>
<div class="d-md-flex flex-1" style='justify-content: flex-end'>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a class='text-white'>Login</a>
</p>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a href='/register' class='text-white'>Register</a>
</p>
</div>
</div>
</nav>
<!-- MODALS -->
<!-- LOGIN MODAL -->
<LoginModal />
<!-- -->
<router-view/>
</div>
</template>
<script>
import LoginModal from '@/components/modals/loginModal';
export default {
name: 'App',
components: {
'LoginModal': LoginModal
},
data () {
return {
}
},
...
}
</script>LOGIN MODAL
<template>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<p class="font-weight-bold text-white h5 text-center text-uppercase">Login</p>
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder='Username...'>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder='Password...'>
</div>
<div class="form-group text-center my-4">
<input type="button" value="Submit" class='rounded'>
</div>
</form>
<p class="text-white text-center small">
Forgot Password?
<br>
<span style='color: #c4b2fe'>or</span>
<br>
Register a new account
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'loginModal',
data () {
return {
}
},
mounted () {
}
}
</script>
<style scoped>
.block {display: block}
.modal-body {height: 50%}
.modal-body p:nth-child(1) {margin: 40px 0;}
.modal-content {background-color: #4855d8;}
.modal-content input {
background-color: #252b6e;
border: none;
font-weight: bold;
color: #b6b4b7;
font-size: 14px;
}
.modal-content input[type='button'] {
color: white;
margin: auto;
padding: 8px;
text-align: center;
cursor: pointer;
background-color: #080715;
width: 120px;
}
</style>vue.js bootstrap-4 bootstrap-modal
asked Nov 15 '18 at 9:35
LorzaLorza
408
add a comment |
0
0
0
I have a main App.vue file, where I have placed elements like the navigation bar. The remainder of the content is rendered by vue-router. I'm trying to also place a series of modals on this file such that the modals can be accessed on any route, as soon as the corresponding link on the nav bar is clicked. I'm having trouble figuring out how to toggle the components to show and fade in (fade in -> I'm using bootstraps modals.The $ identifier for jQuery is causing issues and is not being recognised )
Any ideas?
APP.VUE
<template>
<nav class="navbar navbar-expand-lg px-0" id="navbar" v-else>
<a href="#" class='col-md-2 text-center py-0'>
<img src="./assets/4.png" id='site-logo'>
</a>
<div class="d-md-flex w-100">
<div class="d-md-flex flex-1">
...
</div>
<div class="d-md-flex flex-1" style='justify-content: flex-end'>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a class='text-white'>Login</a>
</p>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a href='/register' class='text-white'>Register</a>
</p>
</div>
</div>
</nav>
<!-- MODALS -->
<!-- LOGIN MODAL -->
<LoginModal />
<!-- -->
<router-view/>
</div>
</template>
<script>
import LoginModal from '@/components/modals/loginModal';
export default {
name: 'App',
components: {
'LoginModal': LoginModal
},
data () {
return {
}
},
...
}
</script>LOGIN MODAL
<template>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<p class="font-weight-bold text-white h5 text-center text-uppercase">Login</p>
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder='Username...'>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder='Password...'>
</div>
<div class="form-group text-center my-4">
<input type="button" value="Submit" class='rounded'>
</div>
</form>
<p class="text-white text-center small">
Forgot Password?
<br>
<span style='color: #c4b2fe'>or</span>
<br>
Register a new account
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'loginModal',
data () {
return {
}
},
mounted () {
}
}
</script>
<style scoped>
.block {display: block}
.modal-body {height: 50%}
.modal-body p:nth-child(1) {margin: 40px 0;}
.modal-content {background-color: #4855d8;}
.modal-content input {
background-color: #252b6e;
border: none;
font-weight: bold;
color: #b6b4b7;
font-size: 14px;
}
.modal-content input[type='button'] {
color: white;
margin: auto;
padding: 8px;
text-align: center;
cursor: pointer;
background-color: #080715;
width: 120px;
}
</style>vue.js bootstrap-4 bootstrap-modal
asked Nov 15 '18 at 9:35
LorzaLorza
408
I have a main App.vue file, where I have placed elements like the navigation bar. The remainder of the content is rendered by vue-router. I'm trying to also place a series of modals on this file such that the modals can be accessed on any route, as soon as the corresponding link on the nav bar is clicked. I'm having trouble figuring out how to toggle the components to show and fade in (fade in -> I'm using bootstraps modals.The $ identifier for jQuery is causing issues and is not being recognised )
Any ideas?
APP.VUE
<template>
<nav class="navbar navbar-expand-lg px-0" id="navbar" v-else>
<a href="#" class='col-md-2 text-center py-0'>
<img src="./assets/4.png" id='site-logo'>
</a>
<div class="d-md-flex w-100">
<div class="d-md-flex flex-1">
...
</div>
<div class="d-md-flex flex-1" style='justify-content: flex-end'>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a class='text-white'>Login</a>
</p>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a href='/register' class='text-white'>Register</a>
</p>
</div>
</div>
</nav>
<!-- MODALS -->
<!-- LOGIN MODAL -->
<LoginModal />
<!-- -->
<router-view/>
</div>
</template>
<script>
import LoginModal from '@/components/modals/loginModal';
export default {
name: 'App',
components: {
'LoginModal': LoginModal
},
data () {
return {
}
},
...
}
</script>LOGIN MODAL
<template>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<p class="font-weight-bold text-white h5 text-center text-uppercase">Login</p>
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder='Username...'>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder='Password...'>
</div>
<div class="form-group text-center my-4">
<input type="button" value="Submit" class='rounded'>
</div>
</form>
<p class="text-white text-center small">
Forgot Password?
<br>
<span style='color: #c4b2fe'>or</span>
<br>
Register a new account
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'loginModal',
data () {
return {
}
},
mounted () {
}
}
</script>
<style scoped>
.block {display: block}
.modal-body {height: 50%}
.modal-body p:nth-child(1) {margin: 40px 0;}
.modal-content {background-color: #4855d8;}
.modal-content input {
background-color: #252b6e;
border: none;
font-weight: bold;
color: #b6b4b7;
font-size: 14px;
}
.modal-content input[type='button'] {
color: white;
margin: auto;
padding: 8px;
text-align: center;
cursor: pointer;
background-color: #080715;
width: 120px;
}
</style><template>
<nav class="navbar navbar-expand-lg px-0" id="navbar" v-else>
<a href="#" class='col-md-2 text-center py-0'>
<img src="./assets/4.png" id='site-logo'>
</a>
<div class="d-md-flex w-100">
<div class="d-md-flex flex-1">
...
</div>
<div class="d-md-flex flex-1" style='justify-content: flex-end'>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a class='text-white'>Login</a>
</p>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a href='/register' class='text-white'>Register</a>
</p>
</div>
</div>
</nav>
<!-- MODALS -->
<!-- LOGIN MODAL -->
<LoginModal />
<!-- -->
<router-view/>
</div>
</template>
<script>
import LoginModal from '@/components/modals/loginModal';
export default {
name: 'App',
components: {
'LoginModal': LoginModal
},
data () {
return {
}
},
...
}
</script><template>
<nav class="navbar navbar-expand-lg px-0" id="navbar" v-else>
<a href="#" class='col-md-2 text-center py-0'>
<img src="./assets/4.png" id='site-logo'>
</a>
<div class="d-md-flex w-100">
<div class="d-md-flex flex-1">
...
</div>
<div class="d-md-flex flex-1" style='justify-content: flex-end'>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a class='text-white'>Login</a>
</p>
<p class="text-white mb-0 stat-decor pill-blue nav-item mr-2">
<a href='/register' class='text-white'>Register</a>
</p>
</div>
</div>
</nav>
<!-- MODALS -->
<!-- LOGIN MODAL -->
<LoginModal />
<!-- -->
<router-view/>
</div>
</template>
<script>
import LoginModal from '@/components/modals/loginModal';
export default {
name: 'App',
components: {
'LoginModal': LoginModal
},
data () {
return {
}
},
...
}
</script><template>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<p class="font-weight-bold text-white h5 text-center text-uppercase">Login</p>
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder='Username...'>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder='Password...'>
</div>
<div class="form-group text-center my-4">
<input type="button" value="Submit" class='rounded'>
</div>
</form>
<p class="text-white text-center small">
Forgot Password?
<br>
<span style='color: #c4b2fe'>or</span>
<br>
Register a new account
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'loginModal',
data () {
return {
}
},
mounted () {
}
}
</script>
<style scoped>
.block {display: block}
.modal-body {height: 50%}
.modal-body p:nth-child(1) {margin: 40px 0;}
.modal-content {background-color: #4855d8;}
.modal-content input {
background-color: #252b6e;
border: none;
font-weight: bold;
color: #b6b4b7;
font-size: 14px;
}
.modal-content input[type='button'] {
color: white;
margin: auto;
padding: 8px;
text-align: center;
cursor: pointer;
background-color: #080715;
width: 120px;
}
</style><template>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<p class="font-weight-bold text-white h5 text-center text-uppercase">Login</p>
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder='Username...'>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder='Password...'>
</div>
<div class="form-group text-center my-4">
<input type="button" value="Submit" class='rounded'>
</div>
</form>
<p class="text-white text-center small">
Forgot Password?
<br>
<span style='color: #c4b2fe'>or</span>
<br>
Register a new account
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'loginModal',
data () {
return {
}
},
mounted () {
}
}
</script>
<style scoped>
.block {display: block}
.modal-body {height: 50%}
.modal-body p:nth-child(1) {margin: 40px 0;}
.modal-content {background-color: #4855d8;}
.modal-content input {
background-color: #252b6e;
border: none;
font-weight: bold;
color: #b6b4b7;
font-size: 14px;
}
.modal-content input[type='button'] {
color: white;
margin: auto;
padding: 8px;
text-align: center;
cursor: pointer;
background-color: #080715;
width: 120px;
}
</style>vue.js bootstrap-4 bootstrap-modal
vue.js bootstrap-4 bootstrap-modal
asked Nov 15 '18 at 9:35
LorzaLorza
408
asked Nov 15 '18 at 9:35
LorzaLorza
408
asked Nov 15 '18 at 9:35
LorzaLorza
408
asked Nov 15 '18 at 9:35
LorzaLorza
408
asked Nov 15 '18 at 9:35
LorzaLorza
408
408
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You can use the transitions that VUE incorporates https://vuejs.org/v2/guide/transitions.html.
Along with v-if to show or hide the modal.
APP.VUE - HTML
<transition name='modal-zoom'>
<LoginModal v-if="activeModal" />
</transition>
APP.VUE - JS
methods: {
activeModal: function () {
// return boolean
}
}
answered Nov 15 '18 at 10:15
javimovijavimovi
318110
Okay, It helps toggle the actual component, but I don't know how to toggle the bootstrap modal within the <LoginModal> Component from the App.vue page.
– Lorza
Nov 15 '18 at 11:18
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53316336%2fhow-to-toggle-vue-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can use the transitions that VUE incorporates https://vuejs.org/v2/guide/transitions.html.
Along with v-if to show or hide the modal.
APP.VUE - HTML
<transition name='modal-zoom'>
<LoginModal v-if="activeModal" />
</transition>
APP.VUE - JS
methods: {
activeModal: function () {
// return boolean
}
}
answered Nov 15 '18 at 10:15
javimovijavimovi
318110
Okay, It helps toggle the actual component, but I don't know how to toggle the bootstrap modal within the <LoginModal> Component from the App.vue page.
– Lorza
Nov 15 '18 at 11:18
add a comment |
0
You can use the transitions that VUE incorporates https://vuejs.org/v2/guide/transitions.html.
Along with v-if to show or hide the modal.
APP.VUE - HTML
<transition name='modal-zoom'>
<LoginModal v-if="activeModal" />
</transition>
APP.VUE - JS
methods: {
activeModal: function () {
// return boolean
}
}
answered Nov 15 '18 at 10:15
javimovijavimovi
318110
Okay, It helps toggle the actual component, but I don't know how to toggle the bootstrap modal within the <LoginModal> Component from the App.vue page.
– Lorza
Nov 15 '18 at 11:18
add a comment |
0
0
0
You can use the transitions that VUE incorporates https://vuejs.org/v2/guide/transitions.html.
Along with v-if to show or hide the modal.
APP.VUE - HTML
<transition name='modal-zoom'>
<LoginModal v-if="activeModal" />
</transition>
APP.VUE - JS
methods: {
activeModal: function () {
// return boolean
}
}
answered Nov 15 '18 at 10:15
javimovijavimovi
318110
You can use the transitions that VUE incorporates https://vuejs.org/v2/guide/transitions.html.
Along with v-if to show or hide the modal.
APP.VUE - HTML
<transition name='modal-zoom'>
<LoginModal v-if="activeModal" />
</transition>
APP.VUE - JS
methods: {
activeModal: function () {
// return boolean
}
}
answered Nov 15 '18 at 10:15
javimovijavimovi
318110
answered Nov 15 '18 at 10:15
javimovijavimovi
318110
answered Nov 15 '18 at 10:15
javimovijavimovi
318110
answered Nov 15 '18 at 10:15
javimovijavimovi
318110
318110
Okay, It helps toggle the actual component, but I don't know how to toggle the bootstrap modal within the <LoginModal> Component from the App.vue page.
– Lorza
Nov 15 '18 at 11:18
add a comment |
Okay, It helps toggle the actual component, but I don't know how to toggle the bootstrap modal within the <LoginModal> Component from the App.vue page.
– Lorza
Nov 15 '18 at 11:18
Okay, It helps toggle the actual component, but I don't know how to toggle the bootstrap modal within the <LoginModal> Component from the App.vue page.
– Lorza
Nov 15 '18 at 11:18
Okay, It helps toggle the actual component, but I don't know how to toggle the bootstrap modal within the <LoginModal> Component from the App.vue page.
– Lorza
Nov 15 '18 at 11:18
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53316336%2fhow-to-toggle-vue-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
