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

Discovering the root cause of why a particular CSS style is not being implemented correctly

Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine ...

The Zip file generated in memory is experiencing corruption

I'm encountering an issue while attempting to serve a zip file generated in memory by Flask to a JavaScript front-end. However, the downloaded file appears corrupted and I am unsure of what mistake I may be making. @app.route('/route') def ...

What is the procedure for attaching console.log to "l" in vue.js?

The code in main.js includes the following: window.l = function () { } try { window.l = console.log.bind(console) } catch (e) { } It functions properly in non-Vue applications. However, when trying to use it in a Vue action/method like this: l("test") ...

Using React to update state with a function that returns a value

I am facing an issue where the value returned by the function checkSuggestionList is not being passed to this.state.validSearchParentInput. It seems like the value is being set using setState before the function checkSuggestionList finishes executing. ...

altering the value with the click of a button

I'm new to JavaScript and I've come across a function that adjusts the quantity of ingredients on a recipe. I want to update the value by simply clicking a button. I have jquery included, the classes are properly formatted, and they are linked w ...

Activate a monitoring pixel with a click of your mouse

I have a tracking pixel that is typically placed in the body of a "installation success" page: <img src="http://domain.com/adclick.php" width="1" height="1" border="0" /> However, I want to trigger this pixel when someone clicks on a download butto ...

Why is the location search not staying centered after resizing the map on Google Maps?

I am currently working on integrating Angular with Google Maps. I need to add some markers along with location search functionality. Additionally, I am including location information in a form. When the addMarker button is clicked, a form opens and the map ...

Tips for disabling scrolling on a <div> using another <div> as a lock

I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...

Executing Javascript without invoking the default behavior

Recently, I've been delving into the world of JavaScript and experimenting with the prevent default command for ajax pagination. Here's the code I've come up with: http://jsfiddle.net/6pqfH/2/ $('.pagination').click(function(e){ ...

Encountering a RuntimeError during the integration of Angular Js in Rails with ExecJS

Currently, I'm working on integrating Angular Js into a Rails Project and I've been following the tutorial provided at . However, after completing all the steps, I encountered the following error: https://i.sstatic.net/ehYCb.png I've searc ...

Rails - removing list item upon deletion of parent object

Currently working on a project app as part of a full stack developer bootcamp program. One of the features I'm implementing is a destroy method to remove an item from a list. Using AJAX requests, the goal is to dynamically remove the li element repres ...

What measures can be taken to safeguard my web app from unauthorized devices attempting to connect?

I am looking for a way to restrict access to a webapp so that only authorized users can connect from approved computers or mobile devices. If a user enters the correct username and password, access will be granted only if they are using a device approved b ...

Increase and decrease the size of a table row in real-time

I am attempting to create a bootstrap table in which clicking a button in the first column will expand the specific row to show more details. I am aiming for a result similar to what can be found at this link, but without using the DataTables framework. ...

How can we prevent components from rendering in React when their state or props have not changed?

I encountered a problem in my project where I have a main component that serves as the parent component of my project. Inside this main component, I have defined routes for other components and directly imported some components like a Side Navbar and Login ...

Changing the boolean value for this.$refs.focus() in Vue.js: a guide

I'm trying to switch the focus using $refs, but I keep running into this error: [Vue warn]: Error in render: "TypeError: Cannot read property 'focus' of undefined" TypeError: Cannot read property 'focus' of undefined e ...

Python Flask server struggling to find JavaScript and CSS files within index.html when paired with AngularJS frontend

I'm currently working on a simple website project that involves a Python backend running on Flask and an AngularJS frontend. The main issue I am facing is encountering 404 errors when the index template tries to load CSS and JS files. Here's how ...

Firebase onSnapshot error when retrieving data from Snapchot

Having trouble with Firebase authentication. Whenever I try to authenticate with Firebase, I encounter this error message: App.js:27 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'onSnapshot') Here is the code sni ...

Using Javascript to perform redirects within a Rails application

Currently working on a Facebook application using Rails. There are certain pages that require users to be logged in, otherwise they will be directed to a "login" page. I am unable to use redirect_to for this purpose as the redirection must be done through ...

Building a custom DSL expression parser and rule engine

In the process of developing an app, I have included a unique feature that involves embedding expressions/rules within a configuration yaml file. For instance, users will be able to reference a variable defined in the yaml file using ${variables.name == &a ...

Animate the leftward disappearance of a div to make it vanish

My goal is to create a user interface where users can navigate through different divs. Here is the HTML code: <article id="realize" class="realizeBox"> <div class="shown"> <div class="heading"> <h2>Realisati ...