Question

我有三个输入来插入和保存数据。在按钮上单击，数据将保存到表中。我有一个带有3个参数的$ .ajax（）函数用于同一个动作，但我不太清楚两个或多个参数如何与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-->

HTML代码表

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

JAVASCRIPT：

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

Answer 1

由于您有一个编辑按钮，因此添加一个单击事件监听器，该监听器调用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>

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

1 个答案: