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

Tips for ensuring an element is visible in CUCUMBER JS?

Whenever I run my code, it keeps returning the error message: NoSuchElementError: no such element: Unable to locate element Even though I have set up a wait function, it does not seem to actually wait. The step fails immediately without waiting for the s ...

What is the best way to create a responsive div containing multiple images?

I am working on a slider and my approach is to create a div and insert 4 images inside it. The images will be stacked one above the other using position: absolute, with a width of 1013px, max-width of 100%, and height set to auto for responsiveness. The is ...

Tips on extracting the ID number prior to locating an element by its ID using Python Selenium

I am currently attempting to automate sending LinkedIn connection requests using Python with Selenium. However, I am facing an issue where the ember number value keeps changing every time I try to copy the id of the button. Sometimes it shows as #@id=" ...

The variable is unable to be accessed within the PHP function query

After passing a variable through ajax to a function within my php file "Cart_code.php", I encountered an issue where the variable was not accessible inside the function. Can you help me figure out why? Javascript $.ajax({ type: "POST", url: "incl ...

Is Turbopack compatible with frameworks other than NextJs?

With its impressive speed, it would be great to utilize it in various outdoor projects like Vite. Unfortunately, there does not seem to be much information about it on their website I also checked out https://github.com/vercel/turbo but the details were s ...

What causes the "node: bad option" error to occur when I include a custom flag in the nodejs command line within an Angular 9 application?

Seeking assistance with adding a custom flag to the npm start command in an Angular 9 project. The goal is to intercept proxy requests within the local server and manipulate data. However, encountering the "node: bad option" error consistently. Looking for ...

Encountering a "Cannot GET /PATH" error while developing a NUXT application due to a DOT present in

In my nuxt application, I encountered a peculiar issue. When I execute npm run dev, everything functions properly. However, after running npm run build and then npm run start, I face the error message stating cannot GET [path of the page here] I noticed t ...

How can I safeguard my app from crashing when the initial state is set by undefined props?

What is the best way to prevent the state from crashing if props native_languages[0] does not exist? This is my attempt at protecting the app, but it still crashes when native_languages[0] does not exist: this.state = { language: props.currentDocu ...

Error in JQuery Document Ready AJAX function causing image to not load initially without a page refresh

Currently, I have a piece of customized code that extracts data from an XML file and uses this data to populate specific content on my webpage: $(document).ready(function() { $.ajax({ type: 'GET', url: 'config.xml?date=& ...

Adjusting the size of an object as the page dimensions change

I am looking to dynamically resize an element whenever the document resizes. For example, if a draggable div is moved and causes the document to scroll, I want to adjust the size of another element using $("#page").css('height','120%'); ...

Change the attribute to read-only upon modification of the dropdown value

I have a dropdown menu with four options. My goal is to make the "number" input field readonly if the user selects either "option3" or "option4" from the dropdown. <select id="dropdown"> <option value="option1">option1</option> ...

What is the best way to change a string that represents an array into an actual array?

Experimenting with something new... Imagine I have the following HTML code: <div id="helloworld" call="chart" width="350" height="200" value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" label="['test1', ...

Tips for choosing a week on a calendar with JavaScript

Here is the code for my calendar: <script> $(document).ready(function() { var events = <?php echo json_encode($data) ?>; $('#calendar').fullCalendar({ header: { left: 'prev,next', center: &apos ...

Refresh the JavaScript graph with new data from the AJAX request

Seeking assistance in updating my javascript chart data using ajax data retrieved from a database. The specific chart being referenced is an apex chart. After submitting a form via ajax, the returned result is as follows: type: "POST",crossDomain ...

Just encountered an issue stating "PrismaClient cannot run in the browser" while working with [Next.js]

My initial plan was to log all the IDs of news in my database using console. However, when I executed the code, an error occurred as shown in this image. What is the best way to address and resolve this issue? https://i.stack.imgur.com/ci8G1.png ...

The error message displayed reads as follows: "topojson has encountered a TypeError: Unable to access the property 'feature' as

Context A problem has arisen with JavaScript when trying to use the topojson.feature(topology, object) function. It seems that this issue appeared after moving from TopoJSON version 1.6.26 to version 2.x, although the functionality remains similar. The p ...

Can you provide a brief explanation for this bubble sort JavaScript code?

Can someone please explain to me what the line j<len-i is doing in this bubble sort code? I believe removing -i from that line will still make the program work properly, var arr=[3,5,4,7,8,9,30,0,-1]; function bubble_Sort(arr){ var len = arr.length, ...

The interconnected nature of multiple asynchronous tasks can lead to a render loop when relying on each other, especially when

My asynchronous function fetches data in JSON format from an API, with each subsequent call dependent on the previously returned data. However, there are instances where I receive null values when trying to access data pulled from the API due to the async ...

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

My situation involves a HTML table within a form that is being populated with Handlebars. I need to be able to select certain rows in the table using checkboxes, and upon form submission through a POST request in an Express.js framework, I require the JSON ...

Power up your Vue.js app with Actions and Global Methods

I have been exploring the power of store actions in nuxt.js and I recently organized all my global methods and computed properties into a global mixin. Within this setup, I realized that I have numerous Axios requests fetching different products. Should I ...