Pass a dynamic Vue2 binding to a JavaScript function within an anchor tag

Creating a menu list in Vue has been relatively easy, but now I am facing the challenge of calling a JavaScript function when a user clicks on an item. The v-for directive is working fine and the menu is displaying as expected. However, the issue lies in passing a value to the JavaScript function that needs to be called. Below is my current code:

<a class="dropdown-item" href="javascript:loadNavigation('{{menuItem.name}}')" v-for="menuItem in menuBlock.menuItems">{{menuItem.shortName}}</a>

How can I successfully pass the menuItem.name to my function?

javascriptvue.jsvuejs2

Answer №1

To create a dynamic navigation feature, convert your navigation function into a vue method and trigger it using v-on:click as shown below:

<a class="dropdown-item" v-on:click="loadNavigation(menuItem.name)" v-for="menuItem in menuBlock.menuItems">{{menuItem.shortName}}</a>

In your vue component's script section:

…
data: {
  …
},
methods: {
  loadNavigation: function (event) {
    // Implement your functionality here
  }
}

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

Executing Puppeteer on a Cloud Platform and Transferring Its Output to JavaScript

Running a puppeteer script on Heroku has been successful with buildpacks sorted out. However, the plan is to eventually move it to a personal server and run it on a 5-minute loop. The main issue faced is encountering a timeout (H12 error on Heroku) when it ...

javascriptnode.jsrestexpresspuppeteer

Is there a valid justification for jQuery altering the 'this' keyword in event handlers?

Consider this common scenario: console.log(this); // window or any parent object $('.selector').on('click', function(event) { console.log(this); // clicked DOM element }); var myFunc = function() { console.log(this); // windo ...

javascriptjquery

Encountering a problem during the setup of Vue.js with Onsen UI

Looking to dive into onsenUI vue but running into some issues. When I try to start a new project with monaca using the command: monaca create helloworld and choosing the onsenui-v2-vue-splitter template, I encounter the following error: npm WARN package ...

node.jsnpmvuejs2onsen-uimonaca

ways to organize dates in JQuery

I have dates on the x-axis in a d3.js graph that are coming from a date picker. The dates chosen from the date picker get displayed on the x-axis but are not sorted. I would like to sort those dates. Please suggest something. Here is my HTML: <!docty ...

javascriptjqueryd3.js

Storing multilingual JSON data in AngularJS for faster access

I have successfully implemented a multi-language concept in my application, but I am facing an issue where the language (.json) file is being loaded for every field. As a result, the application takes a longer time to load. My requirement is to load the .j ...

javascriptangularjsjson

Identify the moment an iframe becomes visible

I am currently facing an issue where my website is embedded within another website. However, I need to find a way to detect when my iframe is being shown in order to execute a specific script. Here is an example of what I am trying to achieve: <div id ...

javascriptjqueryhtmliframe

Ajax data is not successfully reaching the designated URL when posted

My task involves sending data to a PHP site that contains code to be executed when the ID #mR-RateableFramePicture is clicked on the first page. This is achieved through an AJAX request: $('#mR-RateableFramePicture').dblclick(function() { ...

javascriptphpjqueryajaxpost

What are the best practices for implementing React Hooks in a standalone React application?

Trying to incorporate React Hooks in a standalone UMD environment is proving to be challenging. The error message I am encountering reads: Uncaught Invariant Violation: Minified React error #307; This error leads me to the following link: https://react ...

javascriptreactjsreact-hooks

Python on the server side generating a downloadable zip file

After passing a parameter from my client to a python script on the server through a GET request, the script initiates a process that results in the creation of a zip file. However, upon making an AJAX call in my client-side JavaScript, I am only able to co ...

javascriptpythonajax

Analyzing files that start with a period "."

I've come across a basic nodeJS script that reads files from a specific PATH and determines whether they are directories or not: var fs = require("fs"); var allFiles = fs.readdirSync(__dirname + '/bb'); allFiles.forEach(function(name){ if ...

javascriptnode.js

Plugin refresh after callback

I have a webpage that features a row of buttons at the top, followed by some content below. Whenever one of the buttons is clicked, the content is updated using UpdatePanels. Within this content, I am attempting to incorporate the royal slider plugin, wh ...

c#javascriptjqueryasp.netupdatepanel

What causes the disappearance of connecting lines after pushing content into a tab?

I have been using a jquery-connections framework to establish connections between elements on my webpage. However, I encountered an issue where the connectors disappear whenever I insert content inside the Tab. Upon including the following code: <div ...

javascriptjquery

The $emit method in Vue seems to be ineffective when used on the parent component, yet it functions properly when used on the

I have a component called "register" which contains an event listener @submit.prevent inside the template, and I am using $emit to send the data. When I console.log within the method of the component itself, it works fine. However, when I try to access the ...

javascriptvue.jsdomvuejs2vue-component

generate JSON containing a nested array of data and headings using NodeJS express

My Node.js API is currently returning JSON in the following format: [ { "id" : "1", "tstamp": "2017-06-01T00:00:00.000Z", "dmemberprofiles","48400" "dgroupprofiles","4800" "msclprofiles","400" }, { ...

javascriptjsonnode.js

How can I smoothly navigate to the top of a page using AngularJS?

After receiving an ajax call response using angularjs, I am looking to automatically scroll to the top of the page. The purpose is to bring focus to alert messages displayed at the top of the page upon receiving the ajax response. Appreciate any guidance ...

javascriptjqueryangularjs

Ways to access array information acquired through JSON format

Struggling with ajax on my webpage, I've encountered an issue with retrieving data from an array in my JSON result using jQuery. Below is the JSON: {"res":{"tname":"my template","process":["software requirement analysis","efrwefgwerg","ergerger","ew ...

javascriptphpjqueryarraysjson

How to Create an Interactive JavaScript Drop Down List for Displaying and Concealing Divs

Looking for some assistance in combining a chained drop-down list with the functionality to show/hide a specific div based on selection. I've come across solutions for each separately, but struggling to merge the JavaScript code (not my strong suit as ...

javascriptjquerydrop-down-menushow-hide

Copy the chosen items from the list and paste them into the textarea, then include any

After reading this post about selecting elements from a list in Angularjs and displaying them in a textarea I am interested in implementing the following new features: Automatically populate the textarea with selected elements from the list. Allow the u ...

javascriptangularjsselecttextarea

Having trouble pinpointing the source files that are loading .js in the <head> section of my Magento website

My console is showing me three 404 errors related to missing .js files in the head section of my website. Even though I don't actually need these files, I want to stop receiving the 404 errors as they are affecting my analytics and SEO. The files caus ...

javascriptjqueryxmlmagento

How can I include a request header in a link using an EJS template in Express/Node.js?

I am currently attempting to create a route that can only be accessed if the user is authenticated with JWT using the middleware below. However, I'm facing an issue in passing the token in the GET request from the client side. It functions correctly o ...

javascriptnode.jsexpressejs