How to get the text of the selected <td> using vue?

Question

I have dynamic table where I fetch the data with $.ajax() from a DB. The data from the rows are editable and I need to save the changes of that same content with vue.js. After changing the content, an $.ajax() function with 4 parameters (name, client_id, url and id) is triggered for this. I'm trying to find a way to get the value of the inputs + the id of the database. I have the code in jquery, but i need to make it more Vue-ish. How can I do this?

Here is the HTML of the table:

HTML:

<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 class='lightgrey'>
        <!-- v-for to create loop / v-bind to bind data to html -->
        <td class="name1" contenteditable="true">{ agr.name }</td><!--{ data binding } -->
        <td class="client_id1">{ agr.client_id }</td>
        <td class="url1" contenteditable="true">{ agr.url }</td>
        <td>
            <input id='hidden' name='hidden' type='hidden' value="<?php echo $value->id;?>"> <button v-on:click="editRedirect(name, client_id, url, id)" class='editButton btn' type="button">
               <img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg"><!-- v-on:click event listener to trigger $.ajax() -->
            </button>
            <a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'>
                <img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg"><!-- button to generate link -->
            </a>
        </td>
    </tr>
</tbody>

And here is my current VUE.JS code. It gives success on button click, but the parameters return undefined. Basically I need to get the $.text() of the editable rows.

VUE.JS:

//VARIABLES
var link = "http://mobisteinlp.com/redirect/redirect";
agr = 0;
//VUE.JS REDIRECT VIEW MODEL
var redirect = new Vue({
        el: '#redirect',
        delimiters: ["{", "}"],
        data: {
            agr1: [],
            agr: [],
            name: '',
            client_id: '',
            redirectUrl: '',
            id: ''
        },
        methods: {
            //FUNCTION TO EDIT DATA FROM TABLE
            editRedirect: function(name, client_id, redirectUrl, id) {
                var self = this;
                console.log(name);
                console.log(client_id);
                console.log(redirectUrl);
                console.log(id);
                var formData = new FormData();
                formData.append('name', client_id, redirectUrl, id);
                $.ajax({
                    url: link + "/editRedirect",
                    type: "POST",
                    data: {
                        name: name,
                        client_id: client_id,
                        redirectUrl: redirectUrl,
                        id: id,
                    },
                    dataType: "json",
                    success: function(obj) {
                        console.log(obj); //
                        this.agr1 = obj;
                        console.log('success!');
                    },
                    error: function() {
                            console.log('error');
                        } //end error function
                }); //end editRedirect $.ajax() function
            }, //end editRedirect function
        } //end methods
    }) //end vue.js instance

Answer 1

It looks like you have name, client_id, redirectUrl, id all defined in your data, but you also have those as properties on agr . That being the case you don't need to pass anything to editRedirect , just use your data properties.

$.ajax({
    ...
    data: {
        name: this.name,
        client_id: this.client_id,
        redirectUrl: this.redirectUrl,
        id: this.id,
    },
    ...
})

Or

$.ajax({
    ...
    data: {
        name: this.agr.name,
        client_id: this.agr.client_id,
        redirectUrl: this.agr.redirectUrl,
        id: this.agr.id,
    },
    ...
})

If you are going to have a v-for loop to iterate some set of table rows then just pass the current item to editRedirect .

<tr v-for="item in stuff>
  <td>
      <button @click="editRedirect(item)">Edit</button>
  </td>
</tr>

And then in your method use

$.ajax({
    ...
    data: {
        name: item.name,
        client_id: item.client_id,
        redirectUrl: item.redirectUrl,
        id: item.id,
    },
    ...
})

I see you are using contenteditable though and I don't know of any good support for that using v-model . You would be better off using inputs or textareas. Then in your table cells you could do this.

<tr v-for="item in stuff>
  <td><input type="text" v-model="item.name"></td>
  <td><input type="text" v-model="item.client_id"></td>
  <td><input type="text" v-model="item.url"></td>
  <td>
      <button @click="editRedirect(item)">Edit</button>
  </td>
</tr>

Which would allow you to update the values.