Tips to prevent the @click event from firing on a specific child component

When I click on any v-card, it redirects me to a different link. However, if I click on the title "World of the Day", I don't want anything to happen. How can I prevent being redirected when clicking on the title? 

template>
  <v-card
    class="mx-auto"
    max-width="344"
    @click="goToAnOtherLink"
  >
    <v-card-text>
      <div>Word of the Day</div>
      <p class="display-1 text--primary">
        be•nev•o•lent
      </p>
      <p>adjective</p>
      <div class="text--primary">
        well meaning and kindly.<br>
        "a benevolent smile"
      </div>
    </v-card-text>
    <v-card-actions>
      <v-btn
        text
        color="deep-purple accent-4"
      >
        Learn More
      </v-btn>
    </v-card-actions>
  </v-card>
</template>
javascriptvue.jsvuetify.jsstoppropagation

Answer №1

If you're dealing with only the title, make use of the stop event modifier. It's much simpler than embedding the logic directly into the method.

<v-app>
    <v-card class="mx-auto" max-width="344" @click="goToAnOtherLink">
        <v-card-text>
            <div class="title" @click.stop>Word of the Day</div>
            <p class="display-1 text--primary"> be•nev•o•lent </p>
            <p>adjective</p>
            <div class="text--primary"> well meaning and kindly.<br> "a benevolent smile" </div>
        </v-card-text>
        <v-card-actions>
            <v-btn text color="deep-purple accent-4"> Learn More </v-btn>
        </v-card-actions>
    </v-card>
</v-app>

Answer №2

Make sure to add a class to the title div and then check for the classes of the event's target within the function goToAnOtherLink. Utilize stopPropagation() in conjunction with your custom code present in that function.

new Vue({
  el: "#app",
  data() {},
  methods: {
    goToAnOtherLink(e) {
      if (e.target.classList.contains("title") || e.target.classList.contains("display-1")) {
        e.stopPropagation()
          console.log("Navigation Cancelled!")
      } else {
        console.log("Navigation Successful!")
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5aba8b8b9b4bb84b5aaa1baa1bebb">[email protected]</a>/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52747564757877784736393322373237">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-card class="mx-auto" max-width="344" @click="goToAnOtherLink">
      <v-card-text>
        <div class="title">Word of the Day</div>
        <p class="display-1 text--primary">
          be•nev•o•lent
        </p>
        <p>adjective</p>
        <div class="text--primary">
          well meaning and kindly.<br> "a benevolent smile"
        </div>
      </v-card-text>
      <v-card-actions>
        <v-btn text color="deep-purple accent-4">
          Learn More
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

Answer №3

To create a unique design for your v-card, consider wrapping it in a div and utilizing absolute positioning to ensure the title appears prominently. By placing the title in front of the v-card, users will not be able to click on it.

Here is an example in pseudo-code:

<div>
   <span>Featured Product</span> <!-- use absolute positioning inside the div -->
   <v-card></v-card>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Sending a POST request from the smartphone application client developed using the Meteor

I'm currently working on a simple mobile app with Meteor that aims to send user location data to a geospatial database or server. However, I'm facing some challenges and uncertainties about the feasibility of this task using Meteor. The issue ari ...

javascriptajaxmeteorxmlhttprequest

What are the steps to integrating a chat feature into my web application using Vue and Java EE?

I have developed a Web Application using Vue.js, REST(JSON), and Java EE with Payara Server as the backend. Now I am looking to integrate a chat feature into my application. The chat should include fixed chat rooms (global, groups) as well as private user ...

restvue.jsjakarta-eechatjava-ee-8

Having issues with Sencha Touch not initiating in mobile browsers

For quite some time now, I have been developing a mobile app using Sencha Touch 2.1 and conducting tests primarily on desktop Chrome and an iOS PhoneGap / Cordova package. Recently, I made the decision to release it as a "native" app while also offering re ...

javascriptsencha-touchmobile-safariandroid-browser

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

javascriptjqueryhtml

Issue: Assertion violation: The use of <Link> element is restricted to within a <Router>. Any solutions or suggestions?

In my React and Next Js application, I am utilizing react-router-dom for routing purposes. The dependencies listed in the package.json file are as follows: This is how my current package.json file looks: { "name": "MUSIC", "versio ...

javascriptreactjsreact-routernext.jsreact-router-dom

I am encountering issues with Axios when bundled with electron - what steps can I take to troubleshoot a compiled exe with electron?

I recently developed a VUE JS application that consumes data from a News API endpoint. To achieve this, I utilized Axios for fetching the data as shown below: import axios from "axios"; let baseURL = `https://newsapi.org/v2`; let apiKey = process ...

vue.jsvuejs2electronvue-cli

Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...

javascriptjquerycssjquery-ui

"Exploring the Wonders of Regular Expressions in JavaScript: Embracing the Truth and All

Hey there! I've been working on a JavaScript script to test password field validation. As of now, I have successfully made the script display an alert when the requirements are not met. However, I am now facing an issue regarding what action to take o ...

javascriptregex

What causes the result of UNDEFINED when accessing an ENVIRONMENT VARIABLE in a REACT application?

Unfortunately, I've hit a roadblock with this seemingly simple question and can't seem to find the answer. I'm having trouble accessing environment variables in a specific file. I am using create-react-app (^16.11.0) The .env file is loca ...

javascriptreactjsenvironment-variables

Inconsistency in Firebase data updates

Hey there, my code snippet below is responsible for capturing latitude and longitude values through a drag-and-drop marker. Although the latitude and longitude are continuously updated in the console when I log them, the same doesn't seem to happen wh ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

What could be causing Jquery to not function properly in an Angular controller?

Can someone please help me understand why my code is not working in JSFiddle? Any assistance would be appreciated! UPDATE: I have to admit, the negative feedback is disheartening. I may not know everything, but asking questions is how we learn. What' ...

javascriptjqueryangularjs

Move the box upwards and change it to grayscale when hovering over the image, then reverse the effect when the hover

As I hover over the image, my goal is to make a gray box appear at the bottom and smoothly slide up. While it slides up, everything it covers should turn grayscale. When I move my mouse away from the image, I want the gray box to slide back down and remove ...

javascripthtmlcsscss-animations

Utilizing Vue with Nuxt.js: A Guide to Parsing POST Request Parameters from External Sources

I am currently facing an issue with accessing the POST request parameters from an external form in my nuxt app. Despite trying to utilize the "asyncData" method, I continue to receive an "undefined" value when attempting to access the submitted parameter t ...

javascriptnode.jsvue.jspostnuxt.js

Providing properties to the main Vue.js components

An Issue I'm Facing I am currently attempting to pass a prop to my root constructor. To achieve this, I have been exploring the use of propsData, which I learned about from this resource: var appComponent = Vue.component('app', require(&ap ...

javascripttypescriptvue.js

Transition and transition-group animations in Vue.js do not seem to be functioning correctly

Having trouble implementing CSS transitions between slides in a Vue 2 Carousel component. Slides are created using v-for and shown/hidden using v-show. Attempted to use <transition> with mode=out-in, but encountered issues with two slides displaying ...

vue.jsvuejs2css-transitions

Employing JavaScript for fading divs in and out sequentially

Hey there! I'm currently struggling with implementing transitions for my tool tips. Any assistance would be greatly appreciated! I am looking to have my "fader" divs fade in and out on click of a button, with each transition lasting 5 seconds. It&apo ...

javascriptjqueryhtmlcssonclick

Challenges with character encoding in NextJS

I am currently dealing with a line of code that creates a dynamic route. <Link href={`/bundeslander/${urlName}`} ><div className=" text-blue-400">{state.name}</div></Link> The variable urlName is generated by fetching dat ...

javascriptreactjsnext.jsencoding

Setting up paths to bypass authentication on an Express website

Currently, I am in the process of developing an application using node and express. I have implemented a passport authorization middleware for all routes as part of my highly modular approach to building the app. One challenge I have encountered is when tr ...

javascriptnode.jsexpressauthentication

How can I put a row at full-width in a Material-UI table in React

I need assistance with displaying data in a table using JSX code: const StudentsTable = (props) => { const classes = useStyles(); return ( <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple ...

javascriptreactjsmaterial-ui

Submitting an HTML form to trigger a PHP function through AJAX

I am currently working on a task that involves POSTing an email address entered in an HTML form to a PHP script for storage in a database. The script should also handle error messages if the user inputs an invalid email address. I want to make this process ...

phpjavascripthtmlajaxforms