Methods to retrieve an array's value list dynamically using the 'id' in Vuejs

**User.vue**

<template>
  <div>
    <div v-for="list in lists" :key="list.id">{{ list.val }} {{ list.kk }}</div>
  </div>
</template>

<script>
import { datalist } from "./datalist";
export default {
  name: "User",
  data() {
    return {
      lists: datalist,
    };
  },
};
</script>
**datalist.js**

export const datalist = [
  { id: 1, val: "11", kk: "potter" },
  { id: 2, val: "22", kk: "james" },
  { id: 3, val: "55", kk: "limda" },
  { id: 4, val: "77", kk: "stepen" }
];
**HelloWorld.vue**

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
        {{ item.kk }}
      </router-link>
    </div>
    <br /><br /><br />

    <b> {{ $route.params.id }}</b>
    <User />
  </div>
</template>

<script>
import User from "./User.vue";
import { datalist } from "./datalist";
export default {
  name: "HelloWorld",
  components: {
    User,
  },
  data() {
    return {
      items: datalist,
    };
  },
};
</script>

I am currently working on implementing dynamic routing. The goal is to display specific array values linked with the dynamic ID when clicked. For example, clicking on "id:1" should only show array values related to that specific ID.

However, the current issue I'm facing is that clicking on any ID value displays the entire array list instead of the specific values associated with that ID.

1

11 potter 22 james 55 limda 77 stepen

The complete working code can be found here: https://codesandbox.io/s/proud-fast-sokui?file=/src/components/HelloWorld.vue

Answer №1

To access the necessary user information, utilize $route.params.id within the context of User.vue. For instance, in User.vue:

<div v-for="(item, key) in user" :key="key">
  {{ item }}
</div>
...
computed: {
  user: function () {
    return this.lists.find((item) => item.id === this.$route.params.id);
  },
}

Check out a demo at codesandbox

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

Is nuxt functionally equivalent to a regular Vue application hosted on Node.js when `ssr: false` is used?

By setting ssr: false in the nuxt.config.js file, does this mean that Nuxt will function exactly like a plain Vue application? If so, when running npm run build and npm run start, will it simply serve static HTML/CSS/JS files with a Node.js server? Is my ...

The NPM version needs to be updated as it is outdated

Struggling with a dilemma here. My Laravel project is quite dated, and I'm unable to execute npm run dev. Let's take a look at some code: php artisan laravel --version: Laravel Framework 5.8.38 node --version: v16.16.0 This is the current Node v ...

Having trouble with my ajax request not functioning correctly

<body style="margin:0px; padding:0px;" > <form method="post" > <input type="text" id="city" name="city" placeholder="Enter city name"> <input type="submit" value="Search City" id="searchid"/> ...

Adonis 5 and Vue encountering the error message 'E_ROUTE_NOT_FOUND'

I am currently working on a project using Adonis v5 as the backend and Vue 2 as the frontend. I have encountered an issue where, after building the Vue frontend into the public Adonis folder, accessing a specific route directly in the browser results in an ...

Navigator Access - Handlebars

I'm currently making changes to the Ghost blog in order to support multiple languages. To achieve this, I am creating a Handlebars helper: hbs.registerHelper("language", function () { var lang = (navigator.language) ? navigator.language : nav ...

Updating the minimum date based on the user's previous selection using React JS and Material UI

In my material UI, I have two date pickers set up: From Date - <KeyboardDatePicker value={initialDateFrom} disableFuture={true} onChange={handleFromDateChange} > </KeyboardDatePicker> To Date - <KeyboardDatePicker value={initialDateTo} ...

How is the same-domain policy applied to popup windows that have JavaScript enabled in the URL?

Is it possible to achieve something similar to this? var w = window.open("javascript: makeAnAjaxRequest();"); I'm curious whether the Ajax request, which is triggered after the new window is opened, would be considered a cross-site request. Does the ...

Express: How to Define Route Parameters from the Client Side

app.get('login/:id', function (request, response) { … }); I am curious about how the :id parameter is assigned from the user in a request like this. Since each user will have a unique id on my site, I wonder how it works. Does the user need ...

Creating a Show/Hide toggle feature in AngularJS using NG-Repeat

I'm facing an issue with my code where I have a list of items that should only open one item at a time when clicked. However, currently, all items are opening on click and closing on the second click. Can anyone help me identify the problem in my code ...

Is Javascript automatically generated by asp.net?

If I were to initialize a fresh VS project and paste the subsequent sample code into a freshly created page default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1._default" %> <!DOCTYPE ...

What is the best way to identify a particular subtype of HTMLElement based on its tag name and then save that element within another one?

I have a function that generates a node and returns it. Here is an example implementation: addElement: function ({ parentNode, elementName, tagName, }) { // Creates and appends the new node. parentNode[elementName] = document.createEl ...

Injecting dynamic content using JavaScript

My goal is to develop a web page where clicking on any of the three images will cause the content to be inserted into the empty div located above the image links. Below is the JavaScript code I'm using: <script type="text/javascript" src="js/jque ...

What causes CSS animations to suddenly halt?

Recently, I've been delving into the world of CSS animations and experimenting with some examples. Below is a snippet of code where two event handlers are set up for elements, both manipulating the animation property of the same element. Initially, th ...

How to implement Google Tag Manager using the next/script component in Next.js 11?

Version 11 of Next.js recently introduced a new approach with the Script component offering various strategies. To avoid duplicate tags, it is advised to implement Google TagManager using the afterInteractive strategy. In my experimentation: // _app.js ...

"Learn how to seamlessly submit a form without reloading the page and send data back to the same page using Node and Express

I've already reviewed a few questions on this platform. They all focus on submitting post requests, but I believe the process should be similar for get requests as well. Therefore, I made modifications to my code to accommodate get requests. However, ...

What is the process for accessing and storing an uploaded image in a Next.js application?

How can I retrieve an uploaded image in a next.js API route and save it to the public folder? My frontend is all set up, and I'm currently uploading images to an endpoint using plain JavaScript. Below is the onSubmit function for uploading images. Ple ...

Updating the footer of a React application using Material UI Grid

Having some trouble customizing the footer in a React Material-UI grid. Refer to the image below for details. Any ideas on how to change the: 1 row selected? Thank you! ...

What is the best way to transfer information from a view to a controller in Laravel using AJAX?

I am facing an issue with sending data from the view to the controller in Laravel version 7 I am sending data from a form and ul li elements I have an array of data in JavaScript Here is my HTML code: <ul name="ali" id="singleFieldTags&q ...

Preventing Event Loop Blocking in Node.js: The Key to Streamlining Performance

I am currently working on developing two APIs using Express.js. The tasks for both APIs are quite straightforward. The first API involves running a for loop from 1 to 3,000,000, while the second API simply prints a string in the console. All the necessary ...

Uncovering unseen tags generated by JavaScript on a webpage using Python

I have THIS LINK page that contains javascript. To view the javascript, simply click on show details. How can I extract data from this URL source? Should I use re? Here is what I attempted with re: import urllib import re gdoc = urllib.urlopen('Tha ...