Navigating the dynamic components in Vue using dynamic routing

I'm currently developing an application that helps users manage maintenance tasks. I have successfully created a component to display all the data stored in an array of objects. However, I am facing a challenge in redirecting users to different pages when they click on each component, ensuring that the page displays corresponding component data. Despite trying to use Vue syntax $ {maintenance.id} for re-rendering purposes, I haven't been able to achieve the desired outcome.

<card-maintenance
          v-for="manutenzione in manutenzioni"
          :key="manutenzione.id"
          :name="manutenzione.nome"
          :data="manutenzione.data"
          :durata="manutenzione.durata"
        >
        <router-link :to="`manutenzione/${manutenzione.id }`">More details</router-link>
        </card-maintenance>
javascriptvue.js

Answer №1

Vue seems to be misunderstanding the javascript interpolation. You can correct it by following this example:

<card-maintenance
          v-for="maintenance in maintenances"
          :key="maintenance.id"
          :name="maintenance.name"
          :date="maintenance.date"
          :duration="maintenance.duration"
        >
        <router-link :to="'maintenance/' + maintenance.id ">View more details</router-link>
        </card-maintenance>

Answer №2


<template>
<router-link :to="`/maintenance/${id}`"> 
  <div class="maintenanceItem">
    
    <div class="nameMaintenance">
      <p>{{ name }}</p>
    </div>
    <div class="dataMaintenance">
      <p>{{ data }}</p>
    </div>
    <div class="durationMaintenance">
      <p>{{ duration }}</p>
    </div>
       
  </div>
  </router-link>
</template>

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

Retrieving dates from a database and populating them into a jQuery UI Picker using PHP

I need to retrieve dates from the database using PHP and highlight them in a datepicker. Here is how I am attempting to accomplish this: HTML Date: <input type="text" id="datepicker"> // Static dates // An array of dates var eve ...

javascriptphpjqueryajaxjquery-ui-datepicker

What is the method to access the information within the observer?

When I receive the data from the observer in the console, here is what I see: https://i.stack.imgur.com/dVzwu.png However, I am only interested in extracting this specific data from each item on the list: https://i.stack.imgur.com/g8oHL.png To extract ...

typescriptvue.js

Is incorporating re-routing into an action a beneficial approach?

My main concern involves action design strategies: determining the best timing and method for invoking actions. In my project using Mantra (utilizing React for the front-end and Meteor's FlowRouter for routing), there is a UI component that includes ...

javascriptreactjsactionurl-routingmantrajs

Obtaining distinct form control values for replicated form fields with Angular

Issue with Dynamic Form Duplicates: I am currently working with a reactive form that has two fields - name and value. There is an add button that duplicates the form by copying these fields. The challenge I am facing is with updating the values of the dup ...

javascriptangulartypescriptformsangular-reactive-forms

Issue with AngularJS: Not able to get second app in template to function properly

I have encountered a puzzling issue with my two nearly identical apps. The first one seems to be running smoothly as expected, while the second one doesn't appear to be executing at all. Here is my code (jsfiddle): <div ng-app="passwdtool" ng-con ...

javascripthtmlangularjsweb

Stripping away HTML tags from a JSON output

I'm attempting to retrieve a JSON result using jQuery. $.ajax({ type: "GET", url: "http://localhost:8080/App/QueryString.jsp?Query="+query, contentType:"text/html; charset=utf-8", dataType: "json", success: function(json) { if(data!="") ...

javascriptjqueryhtmljsonajax

Getting the version from package.json in Next.js can be easily achieved by accessing the `version

In my quest to retrieve the "version" from the package.json in a Next.js application, I encountered a roadblock. I attempted using process.env.npm_package_version, similar to how it is done in a Node application, but unfortunately, it returned undefined. ...

javascriptreactjstypescriptnext.js

Response received from the server

I am looking to display server response error messages within a form after submission. By using the following code in my JavaScript, I am able to retrieve the error message: .error(function (data, status, header, config) { $scope.postDataSuccessfully ...

javascripthtmlangularjs

What is the best way to filter two tables using only one search bar?

In my Vue2 application, I have implemented a pair of data tables on one of the pages. Each table is placed behind a tab, allowing users to choose which one they want to view. The search bar, however, is not confined within a tab as I wanted to avoid duplic ...

javascriptvue.jsvuejs2

The value of the bound variable in ng-options does not get updated after the array is

I have a situation where I am populating a list using an array and the ng-options directive in AngularJS. The selected item is bound to a variable called myObject.selectedItem. However, I noticed that even after clearing the array, the value of myObject.se ...

javascriptangularjsangularjs-ng-modelangularjs-ng-options

Convert JSON objects within an array into HTML format

Is there a way to reformat an array of JSON objects that has the following structure? [{"amount":3,"name":"Coca-Cola"},{"amount":3,"name":"Rib Eye"}] The desired output in plain HTML text would be: 3 - Coca-Cola 3 - Rib Eye What is the best approach to ...

javascripthtmljsonnode.js

Ways to efficiently manage session control without repeating it in each route

I'm currently working on a Node.js application using express. I've been checking the session in every route, but now I'm looking for a way to separate this check from my routes. Any suggestions? Below is an example of one of my routes: app ...

javascriptnode.jssessionexpress

Lighthouse Issue: Facing PWA Challenges with a "Request Blocked by DevTools" Error

For hours now, I've been struggling to make Lighthouse work in Chrome for my initial PWA project. I feel completely lost as nothing seems to be making sense despite the basic code I have included below. The issue arises when I load the page normally ...

javascripthtmlgoogle-chromeprogressive-web-appslighthouse

Is it feasible to retrieve and view local storage data within an Electron application?

I created an electron application that enables users to drag and drop elements like divs on the screen, saving their positions in localstorage as a class. The purpose is to ensure that any modifications made by the user persist even after reloading or re ...

javascriptjqueryhtmlcsselectron

What could be causing my array to be undefined upon the creation of a Vue component?

I'm struggling to comprehend why my array is showing as undefined in my Vue component. The issue arises in the following scenario: The SelectCategories.vue component uses the router to navigate to the Quiz.vue component. Here, I utilize props to tran ...

javascriptvue.jsvue-component

Every time I attempt to insert a button from Semantic UI into my code, I consistently encounter an error message that reads: "Error: Unable to locate node on an unmounted

Struggling with a side project utilizing a MERNG stack. Can't seem to successfully add a button from semantic UI react documents into my code, sourced from here. Despite multiple attempts, encountering an error without clarity on the root cause. GitHu ...

javascriptnode.jsreactjsmongodbsemantic-ui

Ways to create a looping mechanism with specified number restrictions and limitations

Can anyone assist me with this problem? I am looking to create a "looping" effect similar to the image provided. What is the logic behind this repetition? Thank you in advance for your help! Here is an example output: ...

javascriptreactjsreact-nativelogic

Tips for linking server value with Javascript onmousedown in an aspx web page

I have a single Hyperlink on an aspx page. There are two tasks I need to accomplish: When I click on the hyperlink, I want to log some activity. While logging the EmployeeID value, I need to bind it from the server. However, I am encountering an error t ...

javascriptjqueryasp.net.netc#-4.0

Variable Returned by AJAX

I am attempting to send a variable using a select box via POST method, then use AJAX to submit the data and finally leverage that variable on the original page to update SQL queries. Below is the code snippet I currently have: <script type="text/j ...

javascriptphpjqueryajaxhtml

Confirm before closing the window

How can I get this code to function properly and show a confirmation alert after the user clicks on a button? This is essentially an "exit website button". The confirmation pop-up will have: If "OK" is clicked > the current window will close; If ...

javascripthtml