Binding Click Events Conditionally in Vue.js

Is there a way to only attach a click event when either !date.disabled or date.availability === 'none' is true?

<div class="relative h-20 border border-gray-100 sm:h-24" 
  @click="!date.disabled || date.availability !== 'none' ? selectDate(date) : null">
  {{date}}
</div>

Answer №1

Consider using the following code snippet:

<button @click="(!date.disabled || date.availability !== 'none') ? selectDate() : null">Greet</button>

Check out this Working Fiddle

Answer №2

To achieve this, you can simply use the AND (&&) operator instead of using a ternary operator.

@click="(!date.disabled || date.availability !== 'none') && selectDate(date)"

If the condition is met, only the selectDate method will be triggered; otherwise, nothing will happen.

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

Using PHP to generate a single random number that is shared among all connected clients

Hello friends, I find myself faced with a challenge at the moment. I'm brainstorming an effective method to show a random number that will be synchronized across all connected clients every 120 seconds. Currently, I've set up a system to calcula ...

What is the reason behind the TypeError thrown when attempting to assign to `NaN` or `undefined` in JavaScript

A.S.: The question pertains to the type of error rather than the phenomenon itself "use strict" results in a TypeError when system variables like NaN and undefined are modified. But why is it categorized as a TypeError instead of a SyntaxError? Edit: I ...

I have the ability to effectively open a modal whenever necessary, but I struggle with closing it afterwards

I've been working on implementing a React bootstrap modal, and while I can successfully open it when needed, I'm running into issues with closing it. I'm not sure what mistake I might be making. Here's my markup: <Modal show={this. ...

What is the best way to set a value to null in JavaScript?

Seeking assistance with the "Days Of The Week Exercise" in JavaScript. I have searched MDN and made numerous attempts, but I am still unsure about what null represents and how to effectively use it. If the argument (num) is less than 1 or greater than 7, ...

Guide on incorporating a URL link into an <a class=> tag

Working on a Wordpress website, I encountered an issue in the widget section where I can't get any URL code to work! Here is the current code snippet; [one_third] <a class="home-buttons" href="http://example.com/mortgage-calculator"><i clas ...

define application as app = express()

Just starting out with nodejs and I'm curious about the location of the express function. express() This is supposed to create an Express application. The express() function is a key function exported by the express module. That's the informat ...

Using Javascript/JQuery to extract numbers from a URL with regex or alternative methods

I need help extracting a specific group of consecutive numbers from the following URLs: www.letters.com/letters/numbers/letters" and www.letters.com/letters/letters/numbers/symbols Is there a way to isolate only the continuous sequence of numbers in th ...

Send the JSON output to the controller function

Hello there! I am new to asp.net mvc and I'm looking for a way to pass JSonResult data to a controller method. In my View, I have set up a table like this: <table id="tbl_orderItems" class="table table-striped table-bordered table-hover dt-respo ...

Retrieving the identifier from a value within a Symfony controller

One thing I am looking to achieve is to retrieve an Id based on a folder number. Both the Id and folder number (which is unique) are located in the same controller. I input the folder number from a text box and then need to direct the user to a /Id page. ...

Using Angular to invoke the transclude directive function inside the transcluded component

I am looking to develop a component that includes a transcluded section, take a look at this example: http://jsfiddle.net/vp2dnj65/1/ Upon clicking the "do" button in the example, nothing seems to happen. Is there a way to execute the transcluded cont ...

A Sweet Treat: Birthday Candles Challenge on HackerRank

Welcome to my first post ever on this platform! ...

Change the server's response into a usable object using JavaScript

When receiving a response from the server, it appears in this format: {"value1":1,"value2":45,"value3":"x"} {"value1":1,"value2":45,"value3":"x"} {"value1":1," ...

Incorporating the angular UI router effectively by reusing the same templateUrl and controller multiple times

Exploring the AngularUI Router framework for the first time, I am curious about how to enhance the code snippet below. Everything is functioning well at the moment, but as the project progresses, it will feature 20 questions or more. I want to avoid repea ...

Ways to create a scrollable div with the help of Javascript

I am currently developing a web app on the Tizen platform. Within my HTML5 code, I have a div element with an image set as its background. In certain scenarios, I need to display random text within this div multiple times. The text can vary in size and ma ...

Restricted scope / Effective method for passing an array to the directive user

Picture this scenario where a custom directive is referenced in myHtml.tpl.html: <my-directive></my-directive> This directive starts with an isolated scope. Naturally, there's a controller tied to myHtml.tpl.html. I aim to pass a compu ...

Choose particular spreadsheets from the office software

My workbook contains sheets that may have the title "PL -Flat" or simply "FLAT" I currently have code specifically for the "PL -Flat" sheets, but I want to use an if statement so I can choose between either sheet since the rest of the code is identical fo ...

How to efficiently manage Bootstrap tabs that share the same ID

I am looking to consolidate two pieces of content with the same ID into one location. Currently, I have tabs for home, menu1, and menu 2, each with their own respective content tabs under menu 1. My goal is to combine both instances of menu 1 content into ...

What is the best way in JavaScript to target a specific element in a href attribute in order to create Previous and

<li><a href="/chapter-1.html">Ch. 1 - TitleHere</a></li> <li><a href="/chapter-2.html">Ch. 2 - TitleHere</a></li> <li><a href="/chapter-3.html">Ch. 3 - TitleHere</ ...

Managing selected ticket IDs in a table with AngularJS

I have a table that includes options for navigating to the next and previous pages using corresponding buttons. When I trigger actions for moving to the previous or next page (via controller methods), I store the IDs of checked tickets in an array $scope. ...

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...