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

Question

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

but the problem is that the data is not appending like it's supposed to is not enough as a problem description. Please provide the desired result and the result you are getting. — GillesC
– GillesC, Commented May 25, 2017 at 9:06
The table appears empty on page load, when it should be populated when you (re)load. — Timmy
– Timmy, Commented May 25, 2017 at 9:07
Can you tell what kind of response are you getting, is it an array or object or array of objects? — Vamsi Krishna
– Vamsi Krishna, Commented May 25, 2017 at 10:01
(51) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] — Timmy
– Timmy, Commented May 25, 2017 at 10:07

Vamsi Krishna · Accepted Answer · 2017-05-25 10:22:06Z

1

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>

answered May 25, 2017 at 10:22

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

Thanks for the help. The problem was related to the controller, but now it's working. (happy?)

Vamsi Krishna Over a year ago

@Timmy I am just telling how stack overflow works. By the way sry if I seemed to be rude.

Timmy Over a year ago

well, you were rude and i deleted for a reason. But it's okay. And yes i know how Stackoverflow works. And i ask a lot of questions because im new to Vue.js and ajax(), so it's normal i look for help from another people to explain how should I do it correctly.

Vamsi Krishna Over a year ago

@Timmy well then i'll make up to you for being rude by trying to solve your new question.

Timmy Over a year ago

Thank you very much. Any help is appreciated. :)

Collectives™ on Stack Overflow

vue.js data from $.ajax() request not binding to 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