How to create a row in Vue.js that is clickable and displays a pointer

I need to make a table row clickable in order to trigger a function in the parent component. While I have a working example below, it's not clean due to a specific cell that must not be clickable. Typically, I would use a <router-link> tag to wrap the row, but this exception complicates things. 

<td
  @click.prevent="(!day.submitted || day.rejected ) ? $emit('update', day) : ''" 
  onMouseOver="this.style.cursor='pointer'"
  class="py-0 w-1/4">

Is there a way to shorten this code? I've attempted to create a custom directive without success. 

<td clickMe>{{ day.hours }}</td>

An approach like the above example would be preferable - any suggestions on how I can accomplish this?

javascriptvue.js

Answer №1

The most straightforward method is to incorporate a personalized css class class="pointer":

Within the <template> section:

<td
  @click.prevent="(!day.submitted || day.rejected ) ? $emit('update', day) : ''" 
  class="py-0 w-1/4 pointer">

within the <style> or <style scoped> area:

<style>
.pointer {
  cursor: pointer;
}
</style>

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

Adjusting the URL variable based on the selected checkbox option

My mobile website offers users the option of a bright or dark interface using a checkbox styled like an iPhone IOS7 switch. The functionality is working as expected, but I'm now facing an issue with passing the status of the checkbox between pages. I ...

javascriptjqueryhtmltwitter-bootstrapcheckbox

Browserify pulls in entire module even if only specific parts are utilized, such as react-addons

I am currently using Browserify to bundle my server-side react.js code for the client. There is a concern that utilizing a module from an npm package may result in the entire package being bundled by Browserify. Question: Will require('react-addons& ...

javascriptnode.jsnpmreactjsbrowserify

Encountering Laravel Vue.js error regarding converting an array to a string

I previously posted without receiving any helpful replies, so I'm reaching out again. I'm attempting to create a basic table to retrieve data from a mongodb database using a query builder in Laravel and display it with a Vue component. However, w ...

javascriptphplaravelvue.js

Leverage multiple services within a single AngularJS controller

Is it possible to use multiple services in the same controller? Currently, I am able to achieve this with different services, but it seems to only perform one service. <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs ...

javascriptjqueryhtmlangularjs

Submit a HTML form to a Telegram recipient

I am looking to send HTML form data, which includes input values and select options, to a telegram user. After some research, I discovered that I need to create a Telegram bot. I successfully created one using @botFather by following these steps: /newbot ...

javascriptjqueryajaxformstelegram

The TypeScript compiler is unable to locate the name 'window'

Within my Meteor/React project, I encounter the following line of code: let gameId = window.prompt("Please input the ID of the game you would like to load."); The TypeScript compiler presents an error during transpiling: Cannot find name 'window&apo ...

javascripttypescriptmeteor

Using a function that is passed down from a parent component into a child component

One of my components has a parent-child relationship: <select-school-type placeholder="Filter by school type" @selected="getSchools"></select-school-type> I want the "getSchools" method to be triggered when the user changes ...

vue.js

What could be the reason behind the failure of this computed property to update in my Vue 3 application?

As I transition from Vue's Options API to the Composition API, I decided to create a small Todo App for practice. Within App.vue, my code looks like this: <template> <div id="app"> <ErrorMessage v-if="!isVali ...

javascriptvue.jsvuejs3vue-composition-api

The values are not being displayed in the local storage checkbox

I attempted to transfer checkbox values to another HTML page using local storage, however they were not appearing on the other page Here is my page1 HTML code snippet: <input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW"> ...

javascripthtmlcss

Setting default data in a data table that spans multiple pages is a useful feature that can

I am facing an issue with the default settings in the data table where I need the checkbox to be pre-checked on the controller's side. The problem arises when the checkbox is not staying checked after navigating to the second page and beyond. functi ...

javascriptphphtmldatatable

Configuring relative file paths within the folders in tsconfig.json

In my project, I have set up a root folder named "TypescriptProgramming" which contains the tsconfig.json file. Inside this root folder, there is another folder called "chapter1" that further includes a folder named "minfunction". The minfunction folder ho ...

javascriptnode.jstypescriptubuntu-16.04

Highlighting text within ReactJS using Rasa NLU entities

Currently, I am working on a React application that retrieves data from the Rasa HTTP API and displays it. My goal is to tag the entities in a sentence. The code functions correctly for single-word entities but encounters issues with two-word entities (onl ...

javascriptreactjsrasa-nlu

The equivalent of ESM for resolving modules using the `createRequire` function with a specified

In the process of developing a JavaScript instrumentation engine, I am currently focused on traversing a source file's Abstract Syntax Tree (AST) and queuing imported modules for instrumentation in a recursive manner. In order to achieve this, it is c ...

javascriptnode.jsnode-moduleses6-modules

The JWT Cookie has successfully surfaced within the application tab and is now being transmitted in the request

When sending a JWT token to an authorized user in Express, the following code is used: The cookie-parser module is utilized. module.exports.getUser = async (req, res, next) => { console.log('i am in getuser'); const { SIT } = req.query; ...

javascriptnode.jsexpressjwtexpress-jwt

Pass an array of links from the parent component to the child component in Vue in order to generate a dynamic

I am currently working on building a menu using vue.js. My setup includes 2 components - Navigation and NavLink. To populate the menu, I have created an array of links in the App.vue file and passed it as props to the Navigation component. Within the Navig ...

javascriptvue.jsvuejs2

Angular2 with Typescript is raising concerns over the absence of specific data types in

I am encountering an issue with the following code snippet: var headers = new Headers(); // headers.append('Content-Type', 'application/json'); headers.append('Content-Type ...

javascripttypescriptangular

How can you retrieve the property value from an object stored in a Set?

Consider this scenario: SomeItem represents the model for an object (which could be modeled as an interface in Typescript or as an imaginary item with the form of SomeItem in untyped land). Let's say we have a Set: mySet = new Set([{item: SomeItem, s ...

javascripttypescriptecmascript-6

An unusual issue encountered while utilizing jQuery toggle: a straightforward illustration

Attempting to create a partial fade effect using toggle for toggling opacity values when clicking an element, but encountering an issue where nothing happens on the first click. The HTML code: <html> <head> <script type="text/javascript" s ...

javascriptjqueryclicktoggle

Vue composition API's readonly target is designed to restrict changes to a specific

My "Generateur" component is successfully passing props to my "Visionneuse" component. Although everything is working fine in the browser, I am encountering this message in the console: Set operation on key "texteEnvoye" failed: target is readonly. I am c ...

vue.jsvuejs3vue-composition-apivue-reactivityvue-props

Activate jQuery after a vanilla JavaScript function has been executed

I have created a jQuery function that captures any changes made to an input field and stores them in a variable. The input field is connected to a vanilla JavaScript based API library, which I am unable to convert to jQuery. This library is for an address ...

javascriptjquery