如何在vue js中传递id以发布ajax请求?

时间:2018-02-07 05:54:49

标签: javascript ajax vue.js vue-router

我需要传递一个" id"作为vue js中的数据获得?我得到了#34; agnt.basic.actor"。由于存在许多id,我怎么能够传递相同的

<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>

当我点击提交按钮时,我需要传递从&#34; agnt.basic.actor&#34;获得的ID。

我怎样才能实现相同的目标?请帮帮我。

我的vue js代码是

<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>

那么,我怎样才能传递id?请帮我收看结果。

1 个答案:

答案 0 :(得分:1)

不使用表单标签,只需使用普通按钮提交表单并将当前的agnt数据传递给提交函数。

所以你的HTML应该是

<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>

和方法应该是,

 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;