Disregard the triggering of a parent component's event when clicking on the slot child component in Vue

Is there a way to prevent the emit from the click on the DataTable row if I have also clicked on the Button inside the slot? I've seen this done with native components using @click.prevent, but I'm not sure how to achieve the same functionality with Vue components and emits.

<template>
<DataTable @click="handleRowClick">
  <template v-slot:action="{ row }">
    <Button @click="handleButtonClick">
      Button
    </Button>
  </template>
</DataTable>
</template>
<script>
export default {
  components: {
    DataTable,
    Button
  },
  methods: {
    handleRowClick(){
      console.log("Redirect only when the table row is clicked");
    },
    handleButtonClick(){
      console.log("Perform an action when the button inside the table component slot is clicked, without redirecting");
    }
  }
}
</script>

Answer №1

To prevent event propagation, you can use @click.stop:

<Button @click.stop="handleButtonClick">
  Button
</Button>

If you are using a custom component that does not emit click events, you will need to add .native as well:

<Button @click.native.stop="handleButtonClick">
  Button
</Button>

Answer №2

When you click for the first time, remember to use the modifier self

<DataTable @click.self="handleRowClick">

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

Utilizing ng-class to manipulate arrays in AngularJS

Within my controller's $scope, there is an array called myElements... $scope.myElements = [false, false, true, false, true, false]; ...and I want to assign the class firstClass to a div element if any of the elements in the array are true, otherwise ...

What is the process of transferring an object to a different scope by utilizing checkboxes and Ajax?

I find myself lost in contemplation. I have a checkbox that I want to utilize to move a corresponding object to another area on my page. Furthermore, I am interested in transferring only one specific field of this checked object. In the past, I utilized Aj ...

Seamless infinite background scrolling on the canvas without any disruptions

In my HTML5/JS project, I have implemented infinite background scrolling using multiple canvases. The challenge I am facing is that while the animation is smooth after rendering, there is a quick hiccup when transitioning to the next frame due to the need ...

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

Manually load a node.js module from scratch

Is there a way to utilize Node's native "module" module for manually loading in a module from a file instead of relying on the normal require function? I understand this may seem like an unusual request, but I specifically need modules that declare t ...

Preventing Duplicate Entries in Angular Data Posting

I am currently trying to submit a form to a PHP page that will then return a table of data. The process works perfectly fine if I do not include any parameters in the post request. However, as soon as I try to add parameters for the query, I encounter an n ...

Having trouble sending specific data using the jQuery Form Plugin ajaxForm feature

Currently, I am utilizing two jQuery plugins: plupload and jQuery Form Plugin ajaxForm. Everything is functioning well except for one issue: I am unable to send the file.name (using ajaxForm) of a previously uploaded file with plupload. To elaborate more ...

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

I am currently working with Angular and facing a challenge where I need to display a div like a popup in a table cell when clicked. Despite having the click event logic in place, I am unsure of how to achieve this without using external libraries such as B ...

Learn how to combine pie and bar charts using Highcharts. Discover how to efficiently load JSON data and understand the different ways

I'm feeling a bit lost when it comes to loading json data into the Highcharts combo pie/bar chart. Below is an example code that's a work in progress. I just need some help understanding how to load the json and structure the data series correctl ...

Tips for verifying that a file has not been selected in Croppie

Whenever I use croppie to crop images on my website, everything works fine when I select an image and upload it. But if I try to crop and upload without selecting an image, a black image gets uploaded instead. How can I validate if the file upload is empty ...

Vue is warning that duplicate keys have been detected, specifically with key x. This could potentially lead to an update error. It is important to prevent adding an item that has already been

I'm working with a v-autocomplete that iterates through a list of users. Once I select a user and add them to another list using a button click, I want to prevent adding the same user again by comparing their unique key. How can I implement an alert i ...

Utilizing the getJSON Method to Automatically Fill a Dropdown Selection Element

I am looking to populate a dropdown select menu with bank names and IIN numbers obtained from the following JSON: JSON Data : {"status":true,"message":"Request Completed","data":[{"id":1,"activeFlag":1,"bankName":"Union Bank of India","details":"Union Ba ...

I am curious about how to switch between different modes in order to change the appearance, functionality, and interaction of a program. Currently, I am exploring this

const options_list = ['Exploring', 'Creating']; // an arraylist holding different activities for the bot to switch between. bot.on('ready', () => { setInterval(() => { const randomIndex = Math.floor(Math.random() * ( ...

When an express pre-remove signal initiates another pre-remove action during the removal process

Imagine having 4 different models structured like this: ┌────────────┐ ┌────────────┐ │ User │ │ Goal │ ├────────────┤ 1 ├───── ...

The custom server was functioning properly, but as soon as I altered the file directory, an error occurred on Next.js

After creating "create-next-app," I successfully set up the folder structure as follows: +client2 --.next --node_modules --public --... --server.js However, when I move my "server.js" file to a different location: +client2 --.next --no ...

Tips for converting file byte code to file form data

From one folder I am retrieving a file and uploading it to another server. However, when I extract the file from the first folder, I receive a byte code representation of that file. The API for uploading the file to the second folder requires FormData as a ...

Creating a dynamic dropdown menu that changes based on the selection from another dropdown menu

I'm working on a project that requires users to make specific selections in dropdown menus that are interconnected. Does anyone know how to set up a form so that the options in dropdown menu #2 change based on what the user selects in dropdown menu #1 ...

Calculate the sum of the products when multiplying two values from every array of objects, using Reactjs/Javascript

I'm currently developing an eCommerce application and need to calculate the total price of items that users have ordered. I have an array named 'orders' which contains all the ordered items, each item has two keys - payablePrice and purchase ...

What is the preferred approach for managing user data for logged in users - server-side or client-side?

I am developing a cutting-edge REST-based application using JWT authentication. One option is to retrieve all user posts with a server-side variable that accepts an ID parameter from the client's GET request: http://example.com/api/v1/posts?user_id=1 ...

What is the best way to change the innerHTML of an element with AJAX before it has been loaded into the DOM?

Currently, I have a main feed that displays a list of blog post titles. Whenever a title is clicked, I want to show the details of the corresponding blog post in a new HTML file. Here's my existing code: window.location.href = "/viewpost.html"; ...