vue.js click button save data to dynamic table

Question

I have three inputs to insert and save data. On button click the data is saved to the table. I have an $.ajax() function with 3 parameters for that same action, but i don't understand well how two or more parameters will work with Vue.js. Can someone help?

HTML CODE OF INPUTS:

<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 CODE OF TABLE:

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

then you should provide a comment regarding what was wrong and how you solved it. — Vamsi Krishna
– Vamsi Krishna, Commented May 25, 2017 at 11:26
so you save you want the values of what user inputed in user.naame, client_id, url in your button click function, rigjt? — Vamsi Krishna
– Vamsi Krishna, Commented May 25, 2017 at 11:41
exactly! I need the values of the name input, client_id and url inputs. — Timmy
– Timmy, Commented May 25, 2017 at 11:45
Also working on it! I just don't understand how can i fetch the values of those inputs with vue.js. Ah! okay, i just remembered v-model is missing on my inputs — Timmy
– Timmy, Commented May 25, 2017 at 11:46

Vamsi Krishna · Accepted Answer · 2017-05-25 11:52:13Z

1

Since you have a edit button add a click event listener which invokes the saveRedirect() as follows:

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

answered May 25, 2017 at 11:52

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Timmy Over a year ago

that editButton is for another $.ajax() request with 4 parameters, but i will try your solution in the correct button. just give me a second :)

Vamsi Krishna Over a year ago

@Timmy OK, try it.

Timmy Over a year ago

the parameters log undefined in the console :/

Vamsi Krishna Over a year ago

@Timmy remove the arg.name, just use saveRedirect(name, client_id,, url), since you have set v-model="url" and v-model="name"

Timmy Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

vue.js click button save data to dynamic table

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related