I have 2 components in Vue.js :
Accordion header which open it's content after clicking on it.
Cog icon which open mini-modal menu.
Problem is that when I'm clicking on cog, I don't want accordion to open it's content.
Before click on cog:
After click on cog:
I thought about checking modal menu display status in Accordion (parent component) but I'm not sure it's good approach.
<i class="fa fa-cog" #click="toggleSettings"/>
<div
class="order-settings"
:class="{'order-settings__show':isSettingsOpen}">
<div class="order-settings__option"><p>Re-order</p></div>
<div class="order-settings__option"><p>Convert to subscription</p</div>
<div class="order-settings__option"><p>Download invoice</p></div>
<div class="order-settings__option"><p>Export to CSV</p></div>
</div>
Actual results: Accordion open after clicking on cog (wrong)
Expected results: Accordion doesn't open after clicking on cog
add the stop modifier to the cog click event like so
#click.stop="toggleSettings"
It's how you do event.stopPropagation() in Vue.js
Related
i'm facing a problem in my web application with routerLink. I created a card (div) and I d'like to click on it and open another component on the same page.
Here is my code:
<a class="app-card" [routerLink]="['/', '#app=5h3kemncnri4i3nf']">
<div class="app-card__header">
<h2>{{'HOME.APPLICATION.APP_ONE'|translate}}</h2>
</div>
</a>
This part #app=5h3kemncnri4i3nf is an ID which opens the app on the same page. But wit the code above it didn't work - nothing happen when I click on it .
If I hover the <a> in the browser, I get the following output:
localhost:4200/%23app%5h3kemncnri4i3nf
I'm expecting to open the link:
http://localhost:4200/home#app=5h3kemncnri4i3nf on the same page.
Thanks in advance!
I am having some issues using Buefy and Vue. I have a simple SPA (Single Page Application), that uses vue-router. I have a dropdown that looks like this:
<b-dropdown class="user-dropdown" v-model="navigation" position="is-bottom-left">
<a class="navbar-item" slot="trigger">
<span class="tag is-rounded has-text-weight-semibold avatar">OB</span>
</a>
<div class="columns is-marginless">
<div class="column has-text-centered">
<router-link to="home">
<b-icon class="is-large is-size-4" icon="ion-ionic ion-ios-search"></b-icon>
</router-link>
</div>
<div class="column has-text-centered">
<router-link to="dashboard">
<b-icon class="is-large is-size-4" icon="ion-ionic ion-ios-contact"></b-icon>
</router-link>
</div>
</div>
</b-dropdown>
Getting the dropdown to show works fine. It also hides if I click anywhere on the page, outside of the visible dropdown.
My problem is, that I have a single page application, so when I "change" page (click a link), the dropdown is still visible when the page changes.
Example:
On below page:
www.example.com/#/home
I click on the dropdown, which opens, and then click on the dashboard link, which gives me:
www.example.com/#/dashboard
But the dropdown is still visible.
Anyone know how I can do, so the dropdown will toggle when I click on the links inside it?
Update:
I use the Vue Dev tools in Chrome, and I can see that when I click on the dropdown so it toggles to active, I see this:
name:"active-change"
type:"$emit"
source:"<BDropdown>"
payload:Array[1]
0:true
And when I click anywhere on the page, to close the dropdown, it looks like this:
name:"active-change"
type:"$emit"
source:"<BDropdown>"
payload:Array[1]
0:false
Whatever the drop-down is watching for state isn't changing, because in a SPA it's just javascript. I don't know about the specifics regarding Buefy, but you'll have to set the state variable on router load, or watch some kind of variable to tell the menu that something in another part of your app is different.
I am using bootstrap modals in project. In one page i have 2 containers that, one of them is inside the other one. The outer one has a modal trigger on click event and the inner one has a routing to another page. I can get modal popup if i click on outer container. That's okay but the problem is if i click the smaller container, modal triggered also before routing.
<div class="outer" data-toggle="modal" data-target="#exampleModal">
<a href="somewhere">
<div class="inner></div>
</a>
</div>
How can i prevent the pop up if i click the inner container.
I know i can cancel modal if i catch the hover event for inner container but i am looking more bootstrap way.
Changed your html a bit. I have put the link inside the inner div. Then using jquery you can stop propagation.
<div class="outer" data-toggle="modal" data-target="#exampleModal">
sadsdaddsads<br/>
asdsddsa<br/>
<div class="inner">asadds </div>
</div>
<script>
$(document).ready(function() {
$('.outer > .inner').click(function(e) {
//alert("inner div clicked");
e.stopPropagation();
});
});
</script>
I have and element that should be displayed or hidden from different menu entries (e.g. its visibility toggled), and a toggle button that should switch the visibility of the element, but there are menu locations the element should be visible regardless of the toggle button state.
<a class="menu-bar" data-toggle="collapse" href="#menu">
<span class="bars"></span>
</a>
<div class="collapse menu surcarte" id="menu">
<div class="dansmenu">
some nice stuff comes here
</div>
</div>
HTML above is OK. But if add this code in a top menu bar :
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 1 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 2 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 3 </a>
Each link will toggle the #menu element, first showing it, then hiding it and so and. But i want them to allways show the #menu element. Only the element with the "bars" class should act as a toggler.
I tryed to solve it with $("#menu").show();
but the jquery command seams not working.
Then i tryed the following to find out what happened:
click the link of class "menu-bar" to make the div appearing.
use the command $("#menu").hide(); => WORKS
click the link of class "menu-bar" to make the div disapear : DOES NOT WORK ANYMORE
click the link of class "menu-bar" to toggle the div once more : no effect
use the $("#menu").show(); => WORKS again
click the link of class "menu-bar" to make the div disapear : WORKS
use the $("#menu").show(); => DOSN'T work anymore.
It seems that there is a double imbricated toggle command and i can't escape it.
How do i write a working $("#menu").show(); ?
I finally found out my problem.
I was trying this :
$("#menu").toggle()
where the right syntax was :
$("#menu").collapse('toggle')
Special thanks to Rory McCrossan who showed me the strating point.
I have one page scroll site(like f.ex. fullPage.js, fullContent.js), where fancybox is used to open up new content.
<a class="fancybox" rel="group" href="#content">
<img src="img/thumb.jpg" alt="" />
</a>
<div id="content" style="display:none;">
// content
</div>
Close button by default in fancybox is positioned absolute, which is not acceptable in my case - close button needs to be within specific div.
One way to trigger close is the following:
close
It does close content, but it drops to start position of website, not to section from where fancybox is triggered.
Any ideas how to get close button working so that after closing content, viewpoint doesn't change?
Interesting that default close button, which is enabled through js keeps viewpoint where it was before opening fancybox.
$(".fancybox").fancybox({
closeBtn : true,
});
Thanks in advance.
Use this:
close
This will stop the the browser to slide up.
Or you may also try:
<a href="#nogo"> or <a href="javascript:;">