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:

HTML CODE OF TABLE:


        
            
                    
                    
                        
                            NAME
                            CLIENT-ID
                            URL
                            ACTIONS
                        
                    

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

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

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

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

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

Vamsi Krishna · Accepted Answer

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


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

vue.js click button save data to dynamic table

Answers (1)

Related Questions