Steps to show a particular row in a Vue.js API

I have a question about how to retrieve data from an API and display it in a textbox when the edit button on a specific row table is clicked. The data should include its own id along with other details. I apologize for sharing my code in this format, as I am not familiar with formatting it properly and keep encountering errors.

Code excerpt :

data : {
  students : []
}
methods: {
  async editStudents(edit) {
    let id = "621ecc95817b5aeb5783aebe"
    let response = await 
    this.$axios.get(`https://api.qa.sampleapi.com/students/${id}`)
    console.log(response.data.data)
}

The above code successfully retrieves the specific item, but I am unsure of how to achieve this using a for loop.

Example code :

editStudent(edit) {
  let studentId = id
  let response = await 
  this.$axios.get(`https://api.qa.sampleapi.com/students/${studentId}`)
  for(let i = 0; i < this.students.length; i++) {
    if(edit.studentId === this.students[i].studentId) {
      this.textbox1 = this.students[i].studentId;
    }
  }
}

Answer №1

After analyzing the problem, I have devised a potential solution. Please review and let me know if it meets your requirements.

Demo :

new Vue({
  el:"#app",
  data:{
    students: [{
        id: 1,
      name: 'Student 1'
    }, {
        id: 2,
      name: 'Student 2'    
    }, {
        id: 3,
      name: 'Student 3'   
    }]
  },
  methods: {
    editStudent(id) {
        console.log(id); // This will display the student's ID
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul class="list">
    <li v-for="student in students" :key="student.id">
      {{ student.name }}
      <button @click="editStudent(student.id)">Edit</button>
    </li>
  </ul>
</div>

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

Can the arrangement of icons/buttons on the JW Player control bar be customized?

I am trying to customize the skin of my JWplayer like this: This is my current progress: I have been researching how to rearrange the order of icon / button on the controlbar. According to the jwplayer documentation, the buttons on the controlbar are div ...

Encountering a constructor problem while Jest is mocking a class from an NPM module

I'm currently attempting to create a mock for the Discord.JS module. Within this module, there is a Client class that I am extending in my own "Bot" class. My goal is to mock the module in order to simulate certain methods on other classes such as "Me ...

The Vuetify rating system seems to be having trouble displaying

I've integrated the Vuetify rating component into my app (https://vuetifyjs.com/en/components/ratings#ratings), but I'm facing an issue. Despite having Vuetify 1.5.5 installed and working with other components like buttons, the stars in the ratin ...

Error encountered: When trying to pass an event and two variables, the function e.preventDefault is not recognized as a valid

As a beginner in JS, I thought I had event handlers figured out. After hours of searching for a solution, I'm stuck. I'm trying to create a carousel, and while it mostly works, when I attempt to pass an event handler and two variables from one fu ...

Issue: encountered an ECONNRESET error when attempting to read using the request module in mode.js

When attempting to download and parse large XML files from affiliate sites without a proper API, I encounter the same error consistently while using the request module for Node.js. Error: read ECONNRESET at exports._errnoException (util.js:746:11) at TCP. ...

methods for pausing music through a toggle button in a React JS application

I am facing an issue with the following shortcode for playing a song on a toggle button. The problem occurs when I try to pause the music and it does not stop as expected. import { React, useState } from 'react'; import './audio.css&apos ...

Using NodeJS and Express together with Ajax techniques

I am currently developing a web application that utilizes Ajax to submit a file along with some form fields. One unique aspect of my form is that it allows for dynamic input, meaning users can add multiple rows with the same value. Additionally, the form i ...

What could be causing my AngularJS directive to malfunction in Edge browser?

I have encountered an issue where this code works fine in all major browsers, but Edge only shows the valid value in the DOM inspector. The page still displays the old value. Why is this happening? (function (angular, module) { 'use strict'; ...

Sending a function as a callback to children components in order to update a specific child component

I am currently working on developing a Navbar component that undergoes slight changes when a user logs in through a SignIn component. Here is an overview of how my application is structured: Initially, I have defined a state in the App component where aut ...

Create a drag-and-drop interface and link elements together using a custom JavaScript library

Seeking a solution or Javascript library to create a scientific modeling application, similar to flowchart software such as Visio. The ability to add elements and connect them by clicking and dragging is essential. https://i.stack.imgur.com/vSZpB.png The ...

What is the best way to conduct a Javascript test using Jasmine?

I'm encountering an issue with testing this JavaScript code: $("#ShootBtn").on('click', () => foo.testFunc()); var foo = { testFunc: function() { hub.server.shoot(true, username, gameCode); } } For my testing framework, ...

Dealing with intricate query parameters in Express.Js

Currently, I am working on developing REST APIs using Express.js. One particular express route that I have set up is as follows: /api/customer I have incorporated multiple query parameters into this route, such as: /api/customer?name=jake /api/customer?c ...

Having trouble with redundant code while updating state in ReactJS - React JS

Currently, I am working on a prayer times web app using reactJS (nextjs). To achieve this, I first fetch the geolocation coordinates and then retrieve the city and country name based on these coordinates. Following that, I obtain the prayer times for the s ...

Uploading files in React.js using Yii2 API

I am working with react.js (version 15) and I need to upload files using yii2 api. Here is my code: My component in react: import React, { Component } from 'react'; import Header from './Heaader'; /* global $ */ class New ...

Please be patient until setInterval() completes its task

In order to add a dice-rolling effect to my Javascript code, I am considering using the setInterval() method. To test this out, I have come up with the following code: function rollDice() { var i = Math.floor((Math.random() * 25) + 5); var j = i; ...

Store in database and forward to a different web address

I have created an interactive quiz using jQuery. I need to add a specific feature at the end of the quiz. if (answered_questions === total_questions) { save the user's score to the database; redirect to specified URL; } The redirect_url is ...

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

Variables in the $scope object in AngularJS

Within my $scope in angularJS, I am working with two types of variables. 1). $scope.name and $scope.title are linked to input boxes in the UI html code. 2). On the other hand, $scope.sum and $scope.difference are internally used within my JS code. I need ...

Setting custom parameters ($npm_config_) for npm scripts on Windows allows for more flexibility and customization in

I'm struggling with passing custom parameters from the command line to npm scripts in my package.json file. Despite researching on various platforms, including Stack Overflow, I haven't found a solution that works for me. Here's what I' ...

Updating the CSS class dynamically in Vue using a variable within setInterval

I'm currently diving into Vue JS and I'm looking to dynamically change a class using the setInterval method. However, I'm running into issues passing the changing value of Method to the Computed Property. I want the class to automatically sw ...