Javascript vue.js单击按钮将数据保存到动态表

我有三个输入来插入和保存数据。单击按钮，数据将保存到表中。我有一个$.ajax（）函数，其中有3个参数用于相同的操作，但我不太明白两个或更多参数如何与Vue.js一起工作。有人能帮忙吗

输入的HTML代码：

<div class="col-md-12 marg-t-30 nopad">
        <!--REGISTER NAME CLIENT ID URL-->
            <div class="col-md-1 nopad">
                <div class="rtitle">
                    <div class="roboto-condensed">name</div>
                </div>
            </div>
            <div class="col-md-3 nopad" style="margin-right: 20px;">
                <input v-model="name" class="form-control no-border" id="name" type="text" name="nameClient" placeholder="Insert name..." required="">
            </div>
            <div class="col-md-1 nopad">
                <div class="rtitle">
                    <div class="roboto-condensed">client id</div>
                </div>
            </div>
            <div class="col-md-3 nopad">
                <select v-model="client_id" class="form-control no-border selectpicker" name='client_id' id='clientId' data-show-subtext="true" required="">
                    <?php echo $client_data;?>
                </select>
            </div>
            <div class="col-md-3 nopad">
                <button v-on:click='saveRedirect(agr.name, agr.client_id, agr.url)' id="saveButton" class="save float-right">SAVE</button>
            </div>
            <div class="col-md-12 nopad marg-t-20">
                <div class="col-md-1 nopad">
                    <div class="rtitle">
                        <div class="roboto-condensed">url</div>
                    </div>
                </div>
                <div class="col-md-11 nopad">
                    <input v-model="url" class="form-control no-border" type="text" id="redirectUrl" name="url" placeholder="http://mobisteinlp/redirect/?id=1" required="">
                </div>
            </div>
        </div><!--col-md-12-->

<!--TABLE FOR DATABASE CONTENT-->
        <div class="row">
            <div class="col-md-12 overflow-table">
                    <table class="table" id="table">
                    <thead class="head-color thead-inverse">
                        <tr>
                            <th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
                            <th>CLIENT-ID</th>
                            <th>URL</th>
                            <th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
                        </tr>
                    </thead>

                    <tbody id='table-redirect'>
                        <tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'><!-- v-for to create loop / v-bind to bind data to html -->
                            <td contenteditable="true">{ agr.name }</td><!--{ data binding } -->
                            <td>{ agr.client_id }</td>
                            <td contenteditable="true">{ agr.url }</td>
                            <td>
                                <button type="button" class='editButton btn'>
                                    <img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)"><!-- v-on:click event listener to trigger $.ajax() -->
                                </button>
                                <a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
                                    <img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)"><!-- button to generate link -->
                                </a>
                            </td>
                        </tr>

                        <tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'>
                            <td contenteditable="true">{ agr.name }</td>
                            <td>{ agr.client_id }</td>
                            <td contenteditable="true">{ agr.url }</td>
                            <td>
                                <button type="button" class='editButton btn'>
                                    <img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)">
                                </button>
                                <a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
                                    <img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)">
                                </a>
                            </td>
                        </tr>

                        <tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'>
                            <td contenteditable="true">{ agr.name }</td>
                            <td>{ agr.client_id }</td>
                            <td contenteditable="true">{ agr.url }</td>
                            <td>
                                <button type="button" class='editButton btn'>
                                    <img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)">
                                </button>
                                <a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
                                    <img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)">
                                </a>
                            </td>
                        </tr>

                        </tr>
                        <tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'>
                            <td contenteditable="true">{ agr.name }</td>
                            <td>{ agr.client_id }</td>
                            <td contenteditable="true">{ agr.url }</td>
                            <td>
                                <button type="button" class='editButton btn'>
                                    <img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)">
                                </button>
                                <a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
                                    <img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)">
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    //VUE.JS REDIRECT PAGE

//VARIABLES
var url = "http://mobisteinlp.com/redirect/redirect";
agr = 0;

//VUE.JS REDIRECT VIEW MODEL
var redirect = new Vue({
  el: '#redirect',
  delimiters: ["{","}"],
  data: {
    agr1:[],
    agr:[]
  },

  mounted() {
    this.getAll();//DISPLAY TABLE ON PAGE LOAD
  },

  methods: {
    //
    getAll: function() { 
    var self = this; 
    console.log('test'); 

    $.ajax({ 
        url: url + "/getAll", 
        type: "POST", 
        dataType: "json", 
        success:function(response){ 
            console.log(response);// 
            self.agr1=response; 
            console.log(self.agr1); 
            console.log('success!'); 
        }, 
        error:function(){ 
            console.log('error'); 
        }//end error function 
    });//end $.ajax() request 
    },//end getAll function


    //FUNCTION TO SAVE DATA ON BUTTON CLICK
    saveRedirect: function(name, client_id, url) {
    var self = this;
    console.log(name);
    console.log(client_id);
    console.log(url);
    var formData = new FormData();
    formData.append('name',client_id, url);
    $.ajax({
        url: url + "/saveRedirect",
        type: "POST",
        data: {
            name: name,
            client_id: client_id,
            url: url,
        },
        dataType: "json",
        success:function(obj){
          console.log(obj);//
          this.agr1=obj;
          console.log('success!');
        },
        error:function(){
            console.log('error');
        }//end error function
    });//end saveRedirect $.ajax() function
  },//end saveRedirect function

  }//end methods
})//end vue.js instance

---

由于您有一个编辑按钮，请添加一个单击事件侦听器，该侦听器调用

saveRedirect（）

，如下所示：

<tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'><!-- v-for to create loop / v-bind to bind data to html -->
    <td v-model="agr.name" contenteditable="true">{ agr.name }</td><!--{ data binding } -->
    <td>{ agr.client_id }</td>
    <td v-model="agr.url" contenteditable="true">{ agr.url }</td>
    <td>
        <button @click="saveRedirect(arg.name, arg.client_id, arg.url)" type="button" class='editButton btn'>
            <img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)"><!-- v-on:click event listener to trigger $.ajax() -->
        </button>
        <a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
            <img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)"><!-- button to generate link -->
        </a>
    </td>
</tr>

{agr.name}
{agr.client_id}
{agr.url}

然后，您应该提供一条关于错误的注释以及如何解决错误的注释。因此，您需要保存用户在user.naame、client_id、按钮单击函数的url中输入的值，rigjt？正是！我需要名称输入、客户端id和url输入的值。好的，开始吧！也在努力！我只是不明白如何使用vue.js获取这些输入的值。啊!！好的，我刚刚记得我的输入中缺少v-model，editButton用于另一个带有4个参数的$.ajax（）请求，但我将在正确的按钮中尝试您的解决方案。给我一秒钟：）@Timmy好的，试试看。控制台中的参数日志未定义：/@Timmy删除arg.name，只需使用

saveRedirect（name，client\u id，url）

，因为您已经设置了

v-model=“url”

和

v-model=“name”

，让我们来看看。