What is the best way to include the ID in a Vue.js Ajax request for posts?

Is there a way to pass an "id" obtained as data in vue js? The id is coming as "agnt.basic.actor". Considering the presence of multiple ids, how can I achieve this?

<tr v-for="agnt in agentlist">
  <td v-if="agnt.basic">{{agnt.basic.actor}}</td>
  <td v-if="agnt.basic">{{agnt.basic.name}}</td>
  <td v-if="agnt.basic">{{agnt.basic.email}}</td>
  <td v-if="agnt.basic">{{agnt.basic.phone}}</td>
  <td v-if="agnt.basic"><a v-bind:href="'/agentpendingdetails/'+agnt.basic.actor">Basic Details</a></td>
  <td> <form method="POST" v-on:submit.prevent="handelSubmit();">
    <div class="text-center">
      <button type="submit" class="btn btn-info btn-fill btn-wd"><a v-bind:value="agnt.basic.actor"> Verify</a></button>
    </div>
    <div class="clearfix"></div>
  </form></td>
</tr>

Upon clicking the submit button, I aim to pass the id fetched from "agnt.basic.actor".

How can I go about implementing this? Any assistance would be greatly appreciated.

This is my Vue.js code:

<script> 

dash = new Vue({
    el: '#dash',

    data: {
        agentlist: {
            basic: [],
        },
        authType: '{{ uid }}',
        id: '',
    },
    mounted() {
        var self = this;
        data = {};
        data['auth-token'] = this.authType;
        $.ajax({
            url: "http://alpha/admin/get/agents/pending/",
            data: data,
            type: "POST",
            dataType: 'json',
            success: function (e) {
                if (e.status == 1) {
                    self.agentlist = e.data
                }
            },
        });

    },
    methods: {
        handelSubmit: function (e) {
            var vm = this;
            data = {};

            data['auth-token'] = this.authType;
            data['uid'] = this.uid;

            $.ajax({
                url: 'http://127.0.0.1:8000/alpha/admin/verify/user/',
                data: data,
                type: "POST",
                dataType: 'json',
                success: function (e) {
                    if (e.status) {
                        vm.pid = e.pid;
                        console.log(vm.pid);

                    }
                    else {
                        vm.response = e;

                    }
                }
            });
            return false;
        },
    },
})


</script>

Could you guide me on how to pass the id correctly? Your help in obtaining the desired outcome is much appreciated.

Answer №1

Opt for using a regular button to submit the form instead of using a form tag, and ensure to pass the current agent data to the submit function.

Your HTML code should look like this:

<tr v-for="agnt in agentlist">
  <td v-if="agnt.basic">{{agnt.basic.actor}}</td>
  <td v-if="agnt.basic">{{agnt.basic.name}}</td>
  <td v-if="agnt.basic">{{agnt.basic.email}}</td>
  <td v-if="agnt.basic">{{agnt.basic.phone}}</td>
  <td v-if="agnt.basic"><a :href="'/agentpendingdetails/'+agnt.basic.actor">Basic Details</a></td>
  <td>
    <button @click="handleSubmit(agnt)" class="btn btn-info btn-fill btn-wd">Verify</button>
  </td>
</tr>

And your method should be updated as follows:

 handleSubmit: function (agnt) {
   var vm = this;
   data = {};
   data['auth-token'] = this.authType;
   data['uid'] = this.uid;
   data['agent-actor'] = agnt.basic.actor
   $.ajax({
     url: 'http://127.0.0.1:8000/alpha/admin/verify/user/',
     data: data,
     type: "POST",
     dataType: 'json',
     success: function (e) {
       if (e.status) {
         vm.pid = e.pid;
         console.log(vm.pid);
       } else {
         vm.response = e;
       }
     }
   });
   return false;

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

What is the best method for choosing an element that has been dynamically loaded through ajax

Wanting to streamline the editing process, I am looking for a way to load certain elements of a webpage dynamically, such as a sidebar and navbar, so that changes only need to be made in one place. Additionally, once these elements are loaded, I would like ...

use jquery to send form data and display response dynamically without refreshing

Jquery: <script type="text/javascript"> $(document).ready(function(){ $("form.register").change(function() { $.post("check.php", $("form.register").serialize(), function( data ) { if( data.username == "inuse" ) ...

What is preventing me from being able to import a React component from a file?

I've double-checked my code and everything seems correct, but when I view it on the port, only the app.js file is displayed. import React from 'react'; import ImgSlider from './ImgSlider'; import './App.css'; function ...

Unable to verify the provided resource: Mailchimp

Welcome everyone to my first question posted on StackOverflow. I have tried my best to provide all the necessary details regarding the issue in order to seek assistance. If you require additional information, feel free to ask. To give a brief overview, I ...

NodeJS Express REST API fails to fetch data in GET request

As I work on developing a REST API using NodeJS and Express, I have set up routes for handling "offers". However, when attempting to send a GET request, I receive an empty response along with a 200 status code. Here is the snippet from routes.js: route ...

Using jQuery with multiple selectors can become tricky when dealing with elements that may or may not be present

I decided to be more efficient by using multiple selectors instead of rewriting the same code repeatedly. Typically, if one element exists then the others do not. $('form#post, form#edit, form#quickpostform').submit( function() { ...

Error: The system reference 'Sys' is not defined in ASP.NET

I am trying to implement ajax functionality on the ASP.NET platform. To achieve this, I am using ScriptManager in conjunction with jQuery, and adding the script after the "document is ready" event. $(document).ready(function () { // sync {{scopeN ...

Tips for transforming a JSON array of file paths for images hosted on a server into a JavaScript array for showcasing them. Leveraging the power of AJAX

I am looking for a way to use HTML file/ajax code to extract the JSON message and store the PATHS as a JavaScript array. This will allow my buildImage function to display the first image in the array. I am new to AJAX and suspect that my issue lies in conv ...

What steps do I need to follow to upload an image file through Socket.IO?

For my school project, I am developing a chat application and facing a challenge with implementing an onClick event to trigger a function that utilizes socket-io-file-upload to prompt the user to select a file for upload. This functionality is detailed in ...

Adding a stylesheet dynamically in Angular 2: A step-by-step guide

Is there a method to dynamically add a stylesheet URL or <style></style> in Angular2? For instance, if the variable isModalOpened is set to true, I want to apply certain CSS styles to elements outside of my root component, such as the body or ...

What is the best way to retain checkbox states after closing a modal?

I have a modal that includes multiple checkboxes, similar to a filter... When I check a checkbox, close the modal, and reopen it, the checkbox I clicked on should remain checked. (I am unsure how to achieve this :/) If I check a checkbox and then click t ...

Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

Currently, I am facing an issue in my code where I am trying to introduce a delay using timer(500). However, the problem is that it is only returning partial data. Instead of the expected 17 fields, it is only returning 2 fields. Below is my code snippet f ...

Resolving issues with jQuery's live() method while incorporating AJAX calls

One of the challenges I'm facing is with buttons on a webpage that are part of the class "go". The code snippet below demonstrates how I handle actions related to these buttons: $(".go").live('click', this.handleAction); The issue arises w ...

Using javascript to store HTML tags in a variable

Hey there, I have a quick question. Can someone help me figure out why this code isn't working? let plus = "+" + '<h1>'+"This is a heading"+'</h1>'; When I run the code, the output I get is: +<h1 ...

The module for the class could not be identified during the ng build process when using the --

Encountering an error when running: ng build --prod However, ng build works without any issues. Despite searching for solutions on Stack Overflow, none of them resolved the problem. Error: ng build --prod Cannot determine the module for class X! ...

Backend is currently unable to process the request

Whenever a user clicks on a note in my notes page, a request is supposed to be made to the backend to check if the user is the owner of that particular note. However, for some reason, the request is not being processed at all. The frontend is built using ...

How to properly structure a Vue file in vscode to meet eslint guidelines

Essentially, what I am seeking is uniformity in: the way vscode formats my .vue file how the eslint checker scans my .vue file when I execute npm run .... to launch the server or build the target Currently, after formatting my document in vscode and then ...

Sorting dates in Vue JS can be achieved effortlessly by utilizing components and Computed Properties

I attempted to arrange the dates using computed properties but encountered issues. However, when I utilized methods and removed the slice method, the sorting worked as expected. I also tried splitting the date without success. The root cause of the problem ...

The error message "Jest Nuxt Cannot read property 'child' of undefined" indicates a problem where a property

Having trouble running Jest tests for Nuxt/Vue components. I've connected everything needed for testing, fixed issues with jsdom and babel, but can't figure out the Vue component problem. The error message is: TypeError: Cannot read property ...

Is it possible to conduct a feature test to verify the limitations of HTML5 audio on

Is there a way to detect if volume control of HTML5 audio elements is possible on iOS devices? I want to remove UI elements related to the volume if it's not alterable. After referring to: http://developer.apple.com/library/safari/#documentation/Aud ...