Using Vue Router to set a variable as a key for an object in JavaScript

In my current project, I am attempting to pass a variable as the parameter to vue-router in order to dynamically set it. The code snippet below demonstrates what I am trying to achieve:

<router-link :to="{ 
  name: notification.name,
  (notification.param_name): notification.param_value
}">Blabla</router-link>

I want to clarify that I am not interested in defining the key using var[notification.param_name].

While this question could potentially be applied to a broader issue, I find it challenging to articulate it differently at this time.

javascriptvue.js

Answer №1

To create a computed property that dynamically defines the route based on the 'notification' object, you can use the following code (make sure to specify the parameters within the 'params' property of the object):

computed: {
  notificationRoute() {
    let { name, param_name, param_value } = this.notification;
    return { name, params: { [param_name]: param_value } };
  }
}

Then, bind this computed property to the 'to' attribute:

<router-link :to="notificationRoute">Blabla</router-link>

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

Data binding in Vue does not function properly within functional components

Clicking the button will cause the number n to increase, but the UI will display it as constant 1. <script> let n = 1 function add() { console.log(n) return ++n } export default { functional: true, render(h, ctx) { return (<div> ...

javascriptvue.jsvuejs2observable

The post method in Express.js is having difficulty parsing encoded data accurately

I'm currently working on an AngularJS code that sends a POST request like this: var req = { method: 'POST', url: 'http://localhost:3300/addInventoryItem', headers: { 'Content-Type': 'application/x-www-form- ...

javascriptangularjsnode.jsexpress

How can you access additional fields beyond what is displayed in a dropdown select menu in React?

I am working with an array of Jsons that contain the fields ID, name, and description. My goal is to create a dropdown selection box that will show both the name and description when clicked, and then store the associated ID in the rawID state. I have been ...

javascriptreactjsmaterial-ui

Struggling to implement dynamic templates in an Angular directive

In the process of developing a small angular application that consists of 3 modes - QA, Production, and Sandbox. In the QA mode, there are multiple buttons for users to select values which then populate "myModel". The other two modes, Production and Sandbo ...

javascriptangularjsangularjs-directive

Experimenting with a sample post on a minimalist Node.js application using Mocha and Superagent

I trust you are having a splendid day. Currently, I am focusing on enhancing my TDD skills in Node.js. To practice, I have developed a minimalistic application that handles basic GET and POST requests. The app simply displays a straightforward form to the ...

javascriptnode.jspostmocha.jssuperagent

Implement the insertion of JSON items in real-time by leveraging the power of Angular JS and

I'm facing a challenge trying to insert JSON items into a dynamic list: The structure of my JSON file is as follows: [ { "id":"34", "City":"New York", "Country":"USA" }, { "id":"22", "City":"Las vegas", "Country":"USA" }, { "id":"44", "City":"Paris" ...

javascriptjsonangularjs

Decoding the information received from Socket.IO within the Flash client

When utilizing server node.js and module Socket.IO, data transmission is handled as shown below: var tests = [555, 777]; client.send("Test string"); //first message client.send({tests:tests}); //second message If the data sent is a text string (fi ...

javascriptnode.jsactionscript-3websocketsocket.io

Running JavaScript within Electron is a straightforward process

Looking to create an Electron application that can take code entered into a text area, execute it, and display the result. Any advice on converting the text to JavaScript and running it? ...

javascript

Tips on extracting information from an AJAX call using JQuery

My current project involves utilizing a webapi in asp.net that outputs JSON data. I am looking to integrate this webapi with JQuery within a php-created website. The following is the JQuery code I am using to retrieve information from the webapi: $.ajax( ...

javascriptjqueryajax

Counting the number of PHP inputs in a field

Hello, I am using a PHP script from Steve Dawson's website. To display the output on my HTML page, I am utilizing this AJAX script: <script> $.ajax({ type:'GET', url:'http://www.solariserat.se/count.php', data: ...

javascriptphpjqueryhtmlajax

Why does the browser keep converting my single quotation marks to double, causing issues with my JSON in the data attribute?

This task should be straightforward, but I seem to be facing a roadblock. I am trying to insert some JSON data into an input's data attribute, but the quotes in the first key are causing issues by prematurely closing the attribute. Here is the code ...

javascriptjqueryhtmljson

Exploring the capabilities of Typescript arrays by implementing a forEach loop in conjunction with the

I possess an array: set Array ( [0] => Array ( [name0] => J [name1] => L [name2] => C ) [1] => Array ( [data0] => 3,1,3 [data1] => 5,3 ...

javascriptarraysangulartypescript

Show specific elements in a listview using JavaScript

I have created a dynamic listview using jQuery Mobile that currently shows 4 list items. The list is generated through JavaScript. $( document ).ready(function() { var data = [{ "name": "Light Control", "category": "category", "inf ...

javascript

Fluctuating updated site (ajax)

What method do you recommend for maintaining the data in a table on a page current? Currently, I am using a timer that connects to the server via ajax every 2 seconds to check for updates. Is there a way to trigger an event or function only when the cont ...

javascriptphpajax

Creating a fresh CSS class and utilizing its properties in JavaScript is the task at hand

Whenever I define a css class and attempt to access its member from JavaScript, the result always ends up being undefined. Where could my mistake possibly lie? function myFunction() { var x = document.getElementById("myId").style.myMember; document. ...

javascripthtmlcss

Could you display the picture prior to the function commencing?

This is the image that needs to be loaded before the loop begins. <div id="attendenceGridDivLoader" style="display:none"> <img src="<?php echo base_url() . 'images/loader.gif'; ?>" /> </div> <select onchange=checkAll ...

javascriptjquery

Which is better: storing an element in a variable or selecting it every time it's needed for efficiency?

When targeting an element multiple times, which method is more efficient? Consider Example 1: var el = $("#element"); el.html("foo"); el.html("bar"); Compare it to Example 2: $("#element").html("foo"); $("#element").html("bar"); Is there a noticeable ...

javascriptjquery

Issue: The specific module is unable to be located, specifically on the Heroku platform

While my application performs well locally and on a Travis CI build server, it encounters issues when deployed on Heroku. The error message Error: Cannot find module is displayed, leading to app crashes. Here are some details about the npm module: It r ...

javascriptnode.jsherokunpm

NestJS Logger: Issue setting logger types in main.ts

When attempting to specify logger types in main.ts as illustrated in the official documentation: const app = await NestFactory.create(ApplicationModule, { logger: ['error', 'warn'], }); await app.listen(3000); I am encountering an i ...

javascriptnode.jstypescriptnpmnestjs

What is the best way to add a separator in a b-dropdown menu once the options have been loaded using Vue?

Here is the code snippet for my dropdown element: <b-dropdown id="SchemaDropdown" name="SchemaDropdown" variant="form-control" class="" style="width: 100%" ...

javascripttwitter-bootstrapvue.jsvuex