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?

https://i.sstatic.net/BM1gf.png

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

Is it possible to utilize a route path in a JavaScript AJAX request?

So I have a situation with an ajax call that is currently functioning in a .js file, utilizing: ... update: function(){ $.ajax({ url: '/groups/order_links', ... However, my preference would be to use the route path instead. To achieve ...

javascriptruby-on-railsajaxruby-on-rails-4url-routing

What is the reason behind the decision for Google Chart API to display a legend only for pie charts

I have encountered an issue while attempting to display a pie chart on an ASP.NET webpage using the provided URL: . Despite passing valid values in the URL parameters, only the legend of the chart is displayed and not the chart itself. Can anyone provide i ...

javascriptasp.netchartsgoogle-visualization

Supplier for a module relying on data received from the server

My current component relies on "MAT_DATE_FORMATS", but I am encountering an issue where the "useValue" needs to be retrieved from the server. Is there a way to make the provider asynchronous in this case? export const MY_FORMATS = { parse: { d ...

javascriptangulartypescript

Issues with AngularJS UI Router functionality are being experienced specifically on localhost

What is causing the discrepancy in UI-Router functionality between JSFiddle and localhost? The localhost link is http://127.0.0.1:54046/preview/app/index.html. Have I overlooked something crucial here? There are no visible JS errors present in the console. ...

javascripthtmlangularjsangular-ui-router

Check for compatibility of overflow:scroll with mobile browsers

Is there an easy JavaScript method that works across different devices and libraries? I am looking to assign a class to the html element in order to enable scrollable containers on mobile devices when needed. I want to follow a similar approach to Modern ...

javascriptcssmobile

AngularJS: monitoring changes in an array property

For the problem at hand, take a look at this link: http://plnkr.co/edit/ZphAKvZeoVtuGFSEmOKg?p=preview Imagine you have an array structured like this: var arr = [ { 'a': "123", 'b': "654" }, { 'a': "456", &apo ...

javascriptarraysangularjsinheritanceproperties

exploring various dynamic elements using jquery

If you need some help figuring this out, take a look at the JSFiddle here. I've set it up for users to input any data they want in the text box, choose a table from set one, and then click the "submit" button to send it. <div> <Div> < ...

javascriptjqueryhtmldom

Implementing the map function in ReactJS to showcase data on the user interface

I seem to be facing an issue while attempting to utilize an array of data to display a <ul> element. Despite the console.log's working correctly in the code provided below, the list items fail to show up. <ul className="comments"&g ...

javascripthtmlreactjs

Searching for data between two specific dates can be achieved in Laravel Vue by utilizing the filter

I've successfully implemented a search feature for normal fields in my form. However, I'm encountering difficulty when trying to search within a date range. Here's my controller code: public function index() { $query = Matter::query(); $qu ...

javascriptmysqllaravelvue.jsdate

Creating a form in NextJS to securely transfer user input data to MongoDB

Being new to JavaScript, I have a basic understanding and some lack of experience, but I am eager to learn more. Recently, I embarked on a project using NextJS, an efficient framework that integrates with ReactJS. My current challenge lies in creating a si ...

javascriptreactjsmongodbformsnext.js

What is the best way to incorporate a countdown timer on an ASP.NET webpage?

Looking to display a countdown timer in the top right corner of my ASP page that starts from 00:00:30 and counts down to 00:00:00 before resetting back to 00:00:30. Does anyone have any suggestions on how to achieve this? ...

javascriptasp.net

Controller unable to update AngularJS view

As the title suggests... I'm facing a challenge with this code snippet: (function(angular) { 'use strict'; angular.module('app', []) .controller('ctrl', ['$scope', function($scope) { $scope.ini ...

javascriptangularjs

What advantages does incorporating a prefix or suffix to a key provide in React development?

Is there any advantage to adding a prefix or suffix to the key when using an index as a key in React (in cases where no other value such as an id is present)? Here's an example: const CustomComponent = () => { const uniqueId = generateUniqueId( ...

javascriptreactjs

Using and accessing Ajax response across all routes in an application

I am developing a Node.js Express API application that requires several AJAX calls at the start of the application for global data access in all requests. At the beginning of my app.js file, I include: var users = require('./modules/users'); I ...

javascriptnode.jsajaxexpressglobal-variables

Strange behavior observed when transclusion is used without cloning

During my experimentation with transclusion, I wanted to test whether the transcluded directive could successfully locate its required parent directive controller after being transcluded under it. The directives used in this experiment are as follows: - Th ...

javascriptangularjsdirectiveangularjs-ng-transclude

Adding a simulated $state object to an angular unit test

I'm facing some challenges with Angular unit testing as I am not very proficient in it. Specifically, I am struggling to set up a simple unit test. Here is my Class: class CampaignController { constructor($state) { this.$state = $state; ...

javascriptangularjsunit-testingangular-ui-router

Ways to verify the value of a v-model object

Hey there, I'm a newcomer to Vue. Currently, I am working with Vue version 2.6.10 and element-ui version 2.12.0. Below is the response data from my API: API RESULT [ { name: 'Test', age: 18, cash: null, }, ...

vue.jsvuejs2element-ui

Is there a way to check if a file name input is valid using regular expressions?

I'm having trouble getting my code below to work properly. I'm not sure if the problem lies in the match function syntax or the regex itself. Any assistance would be greatly appreciated. $scope.fileSelected = function (file) { var valid = "/ ...

javascriptangularjsregex

The node-vibrant module in combination with React

Hey there, I'm currently attempting to display the hex color of a react Component using node-vibrant. (The node package is already installed) It works perfectly when executed with node from the console. |- file.js |- image.jpg file.js // I am havi ...

javascriptnode.jsreactjs

Populating a div with letter-spacing

I'm facing a challenge in populating a div with text using letter-spacing. The issue at hand is that I am unsure of the width of the div. Initially, my thoughts leaned towards using text-align= justify, however, I found myself lost in the maze withou ...

javascriptcsshtmlletter-spacing