CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Timmy
Timmy

Reputation: 165

vue.js data from $.ajax() request not binding to table

I have an $.ajax() function properly working and returning a result and i think i did everything needed for the data binding to go well.

Basically on page load the data from the $.ajax() is appended to a table, but the problem is that the data is not appending like it's supposed to. Am I missing something?

HTML:

    <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 class='lightgrey'>
                    <td contenteditable="true">{{ agr.name }}</td>
                    <td>{{ agr.client_id }}</td>
                    <td contenteditable="true">{{ agr.url }}</td>
                    <td>
                        <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
                    </td>
                </tr>
                <tr class='lightgrey'>
                    <td contenteditable="true">{{ agr.name }}</td>
                    <td>{{ agr.client_id }}</td>
                    <td contenteditable="true">{{ agr.url }}</td>
                    <td>
                        <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
                    </td>
                </tr>
                <tr class='lightgrey'>
                    <td contenteditable="true">{{ agr.name }}</td>
                    <td>{{ agr.client_id }}</td>
                    <td contenteditable="true">{{ agr.url }}</td>
                    <td>
                        <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
                    </td>
                </tr>
                <tr class='lightgrey'>
                    <td contenteditable="true">{{ agr.name }}</td>
                    <td>{{ agr.client_id }}</td>
                    <td contenteditable="true">{{ agr.url }}</td>
                    <td>
                        <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

JAVASCRIPT:

    //VARIABLES

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

    //VUE.JS REDIRECT VIEW MODEL

    var redirect = new Vue({
        el: '#redirect',
        data: {
            agr1: []
        },
        mounted() {
            this.getAll(); //DISPLAY TABLE ON PAGE LOAD
        },
        methods: {
            //
            getAll: function() {
                var self = this;
                console.log('teste');
                $.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
        } //end methods
    }) //end vue.js instance

Upvotes: 0

Views: 861

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

You have initialized a property arg1 which is an array[ ] in your data property as follows:

data: { 
    agr1: [ ] 
}

In you ajax cal you are assigning value of arg1 to response as follows:

  self.agr1 = response;

So assuming that the response is an array of objects(clients in your case). Since complete information is not provided try this:

<tbody id='table-redirect'>
    <tr v-for="arg in arg1" class='lightgrey'>
        <td contenteditable="true">{{ agr.name }}</td>
        <td>{{ agr.client_id }}</td>
        <td contenteditable="true">{{ agr.url }}</td>
        <td>
            <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
        </td>
    </tr>
</tbody>

Upvotes: 1

Related Questions