<div>
<nuxt-link to="/home">
<h1>Title text</h1>
<p>Product description</p>
<p #click.stop="addCart()">Add to cart</p>
</nuxt-link>
</div>
I'm not able to click my addCart function. If I click it's just redirecting to home page.
This should solve your problem:
#click.prevent="addCart()"
Related
I'm using the Carousel from Bootstrap 5.0.2 in my (single-page) Vue 3 app. The carousel works fine when I initially open the page. However, when I navigate with the Vue router to another view and go back the Carousels automatic slide effect stops working. The controls are still working but theres just no automatic transition anymore. I can imagine that this has something to do with Vue removing the whole component from the DOM and later attaching again, but I have no idea how to fix that problem.
<template>
<div class="welcome">
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel"
data-bs-pause="false" data-bs-interval="3000" style="width: 600px" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../assets/welcome_slideshow/dummy_1.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../assets/welcome_slideshow/dummy_2.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../assets/welcome_slideshow/dummy_3.jpg" class="d-block w-100">
</div>
</div>
<!-- controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-->
</div>
</div>
</template>
Notice you are using BS5. I recently hit this exact issue!
Not especially a solution, but after a lot of pain
mounted () {
// Bootstrap x Vue bug that stops the carousel working on navigating
new bootstrap.Carousel($("#exampleSelector")).cycle()
},
Whack this in your exports section.
This allows it to work every time, its a bit clumsy, but its a viable workaround for now. Know its a bit late, but saw you were the only other person suffering from this, maybe it will help someone else!
Think its an issue with Boostrap or Vue maybe both together.
I'm using vue-slick-carousel to build a slider. I have an issue with image which I wrapped as a link. When I click on image redirect doesn't happen. Also I have a title under image which I wrapped as a link too, and with text it works great, but when I click on image it doesn't. It doesn't work only on mobile devices, on desktop when I click on image it makes redirect.
Here is my code:
<VueSlickCarousel
ref="slick"
v-bind="slickOptions"
class="post-category__slider"
>
<div
v-for="post in posts"
:key="`post-${post.id}`"
class="post-category__list-item"
>
<div class="row">
<div class="col-lg-6">
<div
class="post-category__list-item-image mb-4"
>
<a
:href="`/${item.slug}/${post.slug}`"
>
<img
:src="$store.state.env.panelUrl + post.get_thumbnail"
:alt="post.title"
>
</a>
</div>
</div>
<div class="col-lg-6">
<div class="d-lg-flex flex-lg-wrap flex-lg-column justify-content-lg-between h-100">
<div class="mb-4">
<h4 class="post-card__text-block-title">
<a :href="`/${item.slug}/${post.slug}`">
{{ post.title }}
</a>
</h4>
<div>
{{ post.short_story }}
</div>
</div>
</div>
</div>
</div>
</div>
</VueSlickCarousel>
Try adding pointer-events: none to the images. It should do the trick.
please share your properties for a better picture, also try adding only the property with its object something like this: :href="item.slug/post.slug", but for better reference provide your properties.
I have an application with Vue and VueRouter, in my root component I have a tab panel, each tab is a router-link, when I click on each routerlink it takes me to the specific route, until then everything is fine, for example the route misitio.com/shop/ activate the link for this route
the problem is when within that route there is another component that leads to mysitio.com/shop/categories, I would like to leave the link of the route mysite.com/shop active but it is not like that.
Example Code
<div class="col-md-12">
<ul class="nav nav-tabs md-tabs nav-justified default-color-dark" role="tablist">
<li class="nav-item ">
<router-link :to="{ name: 'shop'}" exact
class="nav-link text-white"
data-toggle="tab"
role="tab">
<i class="fa fa-table"></i> SHOP
</router-link>
</li>
<li class="nav-item">
<router-link :to="{ name: 'other'}" exact
class="nav-link text-white"
data-toggle="tab"
role="tab" >
<i class="fa fa-heart"></i> OTHER
</router-link>
</li>
</ul>
<div class="tab-content card">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
</div>
The urls of my tabs are
midominio.com/shop/
midominio.com/shop/categories/
if I do not use exact, when I select the second option the first one also marks me
How can I achieve this behavior? I thought of a regular expression maybe to activate the link
Probably not the best solutions, but these are the ways that your problem could be solved:
controlling the active class like v-bind:active-class="$route.path
!== '/shop/categories/' ? '(your active class)' : ''
control the exact prop like v-bind:exact="$route.path ===
'/shop/categories/'"
I want to make close function of card-reveal like FAB button.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right"></i></span>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
Here is my JSFiddle
What I need? Although material design Icon now work in this example, I need to make "close" button as fab. It means, even card-reveal content scroll down, close button keeps position in card-reveal section and visible.
Is it possible?
The nature of the card component seems to make this tough to achieve without getting hacky and mixing strange CSS properties. I think the best I can achieve that still looks pleasing is a FAB that travels up and down with the card-reveal. Another solution may exist, but it may not be as clean.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title grey-text text-darken-4">
Card Title
</span>
<a class="activator btn-floating red right"></a>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Card Title
<a class="card-title btn-floating red right"></a>
</span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
i have a div which is dynamically generated though button click.
As follows:
`
<div id="modal4#{c.requestId}" class="modal-approval-size modal fade modal1" tabindex='-1'>
<div class="modal-dialog modal_dialog"
style="background-color: #f5f3f4;">
<div class="modal-content-new modal-content">
<div class="modal-header modal_header">
<h4 class="modal-title">Confirmation Header</h4>
</div>
<div class="modal-body modal_body">
<p>Please confirm the approval by clicking Ok. If you do not wish to approve the request please click Cancel.</p>
</div>
<div class="modal_footer">
<span><a href="#"
style="color: #000000; text-decoration: underline;"
data-dismiss="modal" aria-hidden="true">Cancel(Esc)</a></span>
<button type="button" class="btn btn-primary approve_btn"
data-dismiss="modal" id="approvalConfirm" onclick="callFunction('#{c.requestId}','C','A')">OK</button>
</div>
</div>
</div>
</div>`
I want to click on the OK button through selenium WebDriver.
I am using Xpath as below:
//*[#id="approvalConfirm"]
But its not clickable and working. Can you please tell me why and how to fix it?