Is it possible to use a conditional statement within a Vue click event to determine which function should be

Is there a way to incorporate an if statement within v-bind, v-on, or @click in order to determine which function should be executed?

The current approach that I have, though partially effective, is as follows (using shorthand JavaScript for the if statement):

<li v-for="entry in entries.entries"><button type="button" @click="entry.entries?openSub($event):'entry.action'">{{entry.title}}</button>

Essentially, if the button's list item contains sub entries, clicking the button should activate the function that adds the submenu-active class. If there are no sub entries present, the button should execute the assigned function instead.

While the openSub($event) function runs correctly, the function designated for situations with no entries neither executes nor gets added to the button.

Answer №1

The issue lies in the fact that you are not properly calling a function.

new Vue({
  el: '#app',
  data: {
  bool: true
  },
  methods: {
  one() {
    console.log('one');
      this.bool = !this.bool;
    },
    two() {
    console.log('two');
      this.bool = !this.bool;
    }
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button @click="bool ? one() : two()">Click</button>
</div>

Hence, make sure to include entries.action() in your code.

<li v-for="entry in entries.entries"><button type="button" @click="entry.entries ? openSub($event) : entry.action()">{{entry.title}}</button>

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

What steps should I take to ensure my images load properly in my Vue application while utilizing webpack and vue-loader?

Having recently ventured into Vue, I find myself delving into some older code for a Vue application and facing the issue of images not loading onto the page. Despite validating that my component's asset paths are accurate as an extension within my cod ...

Dealing with form errors - Using Node.js and Express Framework

Is there a way to handle errors that occur when dealing with null form inputs or unavailable cities from the weather api service? Sometimes, when an empty query or a misspelled city is inputted, the server returns errors and halts operation. app.get("/", ...

Customizing Typefaces in JavaScript's CanvasJS

I have been working with graphs created using canvas.js. While I have successfully built the graphs, I am struggling to change the font size and font family in the output. var ctx = $("#line"); var barGraph = new Chart(ctx, { type: ...

Running a PHP function embedded in a JavaScript script

I've gone through all the questions here but I'm still struggling to grasp this concept or make it work. My goal is to have a button that triggers a script to execute a php function. HTML: <button id="update_submit" type="button" onClick="m ...

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

I keep running into errors when trying to call functions within a mapped array in my React JS code

During my code execution, I am invoking a function by iterating through an array let artistId = artist._id; orderData.products.map((cartproduct, index) => { const sendOrderData = { product: cartproduct._id, qty: cartproduct.qty, }; ...

Issues with Nuxtjs routing on Netlify

I currently have a NuxtJs (Vue) application deployed on Netlify. The issue I am facing is that when I redirect to other pages, the URL ends up concatenating the last page and the next page. For example, if the current page URL is https://page-example/regi ...

The tooltip for the Google+ button stopped working

After setting up my Portfolio, I added a Google+ button. However, the page lacks styling and there seems to be an issue with the tooltip causing delays. Can anyone help me identify where the problem lies? ...

Is it possible to modify the color of a division row using an onchange event in JQuery?

I am facing a requirement to dynamically change the color of rows based on the dropdown onchange value. The rows are structured in divisions, which were previously tables. There are two main divisions with rows that need to be updated based on dropdown sel ...

Error: The object does not have a method called 'to top scroller' and it is causing an uncaught type error

A plugin was obtained from the following link: http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i and the code was attached below in the index.html file. Several jQuery plugins were attempted, but none work ...

Autocomplete for Converting Postal Codes to Cities

I'm currently working on a project that involves two input fields, as shown below: <div class="form-group{{ $errors->has('plz') ? ' has-error' : '' }}"> <label for="plz" class ...

"Enhance your user experience with an interactive AngularJS dropdown menu featuring search and tree

I need to develop a custom control or directive that includes a dropdown list, search box, and tree view, as shown in the image below. When the dropdown list is clicked, it should display the search box and tree view. Selecting an item from the tree view s ...

Can you identify any issues with this Javascript code's "If" condition?

In my JavaScript code, I have an "if condition" that looks like this: for (var i in data) { //Gender.push("Gender " + data[i].JenisKelaminID); if (data[i].JenisKelaminID == 1) { Gender.push("Men"); } if (data[i].JenisKelaminID == 2) { Gend ...

Show a caution message when there has been no activity on the page for 3 minutes

I am currently developing a PHP page that includes timed tests. The maximum duration for a test is 1 hour, however the session times out after just 10 minutes of inactivity. Interestingly, when the timeout occurs, the test page does not automatically refre ...

Choose a specific value from a drop-down menu

Looking for a solution with this piece of code: $('#Queue_QActionID').change(function () { if ($(this).val() == '501' || $(this).val() == '502' || $(this).val() == '503' || $(this).val() == '504' || $( ...

I am having trouble setting an object in the state using React hooks

When assigning an initial value to a state as null, the setState method does not hold the value when assigned. Calling an API in useState returns an object which cannot be directly put into setState. const [userProfile, setProfile] = useState(null); cons ...

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

I am facing an issue with my code while using Quasar (Vue 3.0). The code snippet in question is: <q-select filled v-model="model" :options="options" label="Filled" /> When the drop-down menu is open and I scroll the pag ...

Unable to assign attribute following discovery

Can the attribute of an anchor element that is found using find() be set? I attempted this: $(this).children('a').setAttribute("href","a link"); Although it does locate the anchor element, why am I receiving an error when trying to use setAttr ...

Flashing white screen when transitioning between pages on phonegap iOS system

I'm currently using phonegap for my iOS application project. Interestingly, I've noticed a slight white flicker/flash when navigating between pages in the app. To address this issue, I have refrained from using jquery mobile and instead relied ...

"In the most recent version of THREE.js (r82), the shadow is not detectable

I am having trouble casting a shadow from a cube onto a plane using MeshLambertMaterial in my code. Despite setting up the scene correctly, the shadows are not appearing as expected. Most solutions I have come across suggest that objects should be within ...