I've been struggling on preventing the router link when clicked on the button inside it, e.g:
<router-link to="/a">
<div>...</div>
<button #click.prevent="somemethod()"></button>
</router-link>
When i click on the the child button, i don't want router-link to go on the route
You should have a button. I don't see any button text. Add a button text.Then press submit.
<button #click.prevent="somemethod()">SUBMIT</button>
Related
I want to make navbar for a landing page .
I used router-link for item like this
<router-link :to="#features" target="_self">
features
</router-link>
and when I click on the link it scroll the page and work perfectly
and every link that is clicked get exact-active-class
but if scroll manually it doesn't get this class .
How can I fix this ?
enter image description here
when i click nav items there has an error, but the application goes well!
<a #click="$router.push({ name:'my' ,params:{username:'hello'}})">my music</a>
<a #click="$router.push({ name:'part' ,query:{name:'xx'}})">friend</a>```
I'm trying to implement generic modal component with Vue 3.
And I want to close modal window on click outside the modal's content.
So I added 'close' event on modalWrapper and 'contentClick' to prevent closing (bubbling) when content is clicked:
contentClick(event:Event){
event.stopPropagation();
}
Modal:
<template>
<teleport to="body">
<div class="modal-window" v-on:click="close" v-show="isOpened">
<slot class="modal-window__content" v-on:click="contentClick($event)"></slot>
</div>
</teleport>
</template>
The problem is that contentClick(event:Event) is not fired for some reason. I can wrap slot into another div and put contentClick event on it, but not sure that it's a good solution
test (e) {
e.preventDefault()
console.log('foo')
},
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header">
<v-btn icon flat #click="test($event)"><v-icon>add</v-icon></v-btn>
title
</div>
<contents />
</v-expansion-panel-content>
</v-expansion-panel>
This is v-expansion-panel with action button in it's header.
When I click action button, expansion panel is opened.
Can I have expansion panel doesn't open when I click the button?
By using #click.native.stop on v-btn your button click will work and your expansion panel will not open.
The simplest way is by using #click.stop=""
Sorry.
I didn't know stopPropagation method.
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}