What is the best way to pass a prop into the <router-link>?

If I replace this {{ name }}, the result is "campaigns"

Now, I want to use that in my link

<router-link :to="'/' + '123' + '/' + item.id"> {{ item.name }}</router-link>

I attempted to substitute '123' with {{ name }}

<router-link :to="'/' + {{ name }} + '/' + item.id"> {{ item.name }}</router-link>

But each time I try this, I encounter an error message

Failed to compile. ./src/components/Table.vue?vue&type=template&id=783f90ce& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"5c3eaf11-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Table.vue?vue&type=template&id=783f90ce&) Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:1767)

./src/components/Table.vue?vue&type=template&id=783f90ce& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"5c3eaf11-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Table.vue?vue&type=template&id=783f90ce&) Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:1767)

javascriptvue.jsvuejs2vue-componentvuetify.js

Answer №1

It is important to note that Mustache syntax cannot be used within HTML attributes. For example, the following code is invalid:

<router-link
  :to="'/' + '123' + '/' + item.id"
>
  {{ item.name }}
</router-link>

The correct syntax would be:

<router-link
  :to="`/${item.name}/${item.id}`"
>
  {{ item.name }}
</router-link>

In addition, I suggest looking into passing properties to the route object in the documentation. This will demonstrate how you can define variables within the router such as :id.

Another suggestion I have is to consider defining this as a computed property of the component. This allows for easy viewing in devtools and future debugging (e.g. returning an empty string if the object props are undefined).

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

Utilizing jQuery to Trigger a JavaScript Function in a Separate File

Here is my question: I currently have 2 files: //File1.js function TaskA() { //do something here } //File2.js function TaskB() { //do something here } $(function() { TaskA(); }); The issue I am facing is that the TaskB function in File2.js ...

javascriptjqueryajaxfunctioncallback

Obtaining the data stored in objects within a parse database

I'm currently facing an issue where I am trying to retrieve the name of the creator from the session object, which is a pointer. For testing purposes, I have been attempting to access this information but it keeps showing up as undefined. Any suggesti ...

javascriptparse-platformundefined

Sending emails to multiple recipients with different content using Nodemailer

I have been working on a method to send emails to multiple recipients while also passing the user attribute, which contains the name of the recipient, to the html template. (I AM UTILIZING NODEMAILER as a nodejs module) My current code looks like this: S ...

javascripthtmlnode.jsemailnodemailer

Iterating through a legitimate JSON object and storing each data value in a separate variable

I am currently utilizing jQuery. To further elaborate on my previous question, I have executed an Ajax request using the jQuery $.ajax function with a PHP script. The PHP script returned a JSON object which was validated when tested with link text. I am p ...

phpjavascriptjqueryjson

What is the best way to send props to a component that is exported using a Store Provider?

I'm trying to export my react component along with the redux store Provider. In order to achieve this, I've wrapped the component with an exportWithState callback. However, I'm facing an issue where I can't seem to access the props that ...

javascriptreactjsreact-props

Transform a complex PHP array into JSON format using JavaScript

I have a three-tiered PHP array with both numeric indices and key-value pairs. I would like to convert it to JSON, and reiterate through the object list. How would I do this? The PHP array is called $main_array, and appears as: Array( [0] => Arra ...

javascriptphpajax

What are the steps to apply an AngularJS filter for formatting values within an array?

While I have experience using angular filters for formatting primitive values like numbers into currency formats, I am now faced with the challenge of applying the same filtering to an array of values. For example: price = 1 prices = [1,2,3] If I were to ...

javascriptangularjsfilterangular-filtersselectize.js

Uploading multiple images using Cordova's File Transfer feature

Working on a project using Cordova and jQuery Mobile, my goal is to upload multiple images with the file transfer plugin. After successfully uploading one image, I am now attempting to upload 2 or 3 images in succession. Below is the HTML code snippet: ...

javascriptjquerycordovafile-transfer

Establishing the folder organization for Express Handlebars

I work with NodeJs, Express, and Handlebars. The main file for my server is named app.js const express = require('express'); const exphbs = require('express-handlebars'); const app = express(); app.engine('handlebars', ex ...

javascriptnode.jsexpresshandlebars.js

Implementing a dynamic autosuggest feature using jQuery and AJAX

I'm currently working on implementing an auto-suggest feature for dynamically added input boxes. While everything functions smoothly with static input types, I encounter issues when attempting to achieve the same functionality with dynamic inputs. Bel ...

javascriptjqueryajax

Ways to stop users from accidentally changing routes in react router v3

Currently, I am working on creating a custom hook to block users from making unintended route changes like using the back button or refreshing the page. Since I am using react-router v3, the <Prompt /> component in react router v4 is not an option fo ...

javascriptreactjsreact-router

Having trouble accessing a local JSON file in electron-vue

I am attempting to retrieve a local JSON file in my project. I have tried the following: import axios from 'axios'; import userDataJson from './../data/userData.json'; export const userDataControllerMixin = { data() { return { ...

jsonvue.jselectronaxios

HTML tends to disregard the dimensions specified in the JavaScript file

I'm currently working on replicating an Etch-a-Sketch style drawing board where hovering over a single pixel with the mouse changes its color. However, I've hit a roadblock when it comes to drawing the board. The flexbox container doesn't se ...

javascripthtmlcssflexboxsize

What is the most effective method for transferring resolved promise values to a subsequent "then" chain?

Currently, I am grappling with understanding promises by utilizing the Q module in node.js. However, I have encountered a minor setback. Consider this scenario: ModelA.create(/* params */) .then(function(modelA){ return ModelB.create(/* params */); } ...

javascriptnode.jspromise

Inserting a custom text box underneath the Anything Slider

I am currently incorporating the Anything Slider into a website project. The main purpose of the slider is to showcase videos, but I would like to include a description text box beneath it that dynamically changes based on the selected tab. This snippet de ...

javascriptjqueryhtmlcssanythingslider

How can I programmatically trigger a change event for a dropdown in Vue.js?

I am looking to trigger a dropdown change event within a Vue.js method. <select id="idDropdown" v-model="Result.Value" v-on:change.prevent="changeSelection($event, 'somevalue')"> How can I call the above `cha ...

javascriptvue.js

Update a particular package using Node

Is there a way to update Browser-sync without updating all my node packages? I need the version with the Browser-sync GUI, but I don't want to update everything else. ├─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...

javascriptnode.jsnpmgulpbrowser-sync

Enhancing Nextjs performance for mobile devices

Greetings everyone, I am currently experiencing performance issues on mobile devices. Can anyone provide suggestions on how to enhance the following aspects? https://i.stack.imgur.com/bEmln.png ...

javascriptnode.jscdn

How can Angular JS detect the names of the CSS files being used in an HTML page?

I am in the process of developing a brand new widget where we are incorporating a unique feature that displays the number of CSS files included within an HTML page. Our team requires the count and names of all CSS files utilized on the webpage. While I a ...

javascriptangularjsangularjs-directive

The router.delete function is not working properly because of an 'UnauthorizedError: Unauthorized'. Can you explain why this is happening?

I am facing an issue with one of the routes in my Vue project. Despite having a consistent structure for all routes, one specific route keeps giving me an unauthorized error. Here are the routes in question: router.get('/:userId/reviews', checkJ ...

vue.jsoauth-2.0jwtexpress-jwt