VueJS & Laravel: A bunch of empty rows when using v-for on a table

Question

I'm trying to bind a json array to a table. Therefor I'm using v-for on a <tr> tag.

<tr v-for="file in files">
    <td>@{{ file.name }}</td>
    <td>@{{ file.hash }}</td>
    <td>@{{ file.size }}</td>
    <td>@{{ file.download_count }}</td>
    <td>@{{ file.id }}</td>
</tr>

The file is bound through vue, which loads from a JSON.

<script>
    var url = '{{ route('getAllFiles') }}';
    new Vue({
        el: '#fileTable',

        data: {
            files: null
        },

        created: function(){
            this.fetchData();
        },
        methods: {
            fetchData: function(){
                var self = this;
                $.get(url, function(data){
                    self.files = data;
                    console.log(data);
                });
            }
        }
    });
</script>

The JSON looks like this: http://pastebin.com/tNy7A4Yw so that should be correct. The console.log(data) I've used inside of fetchData() looks exactly like the API Output, so I don't see any error.

Do you getting any console error ? Try to set property dataType: 'json' to $.get method. Edit: Sorry, I see now you said there are no console errors. — Belmin Bedak
– Belmin Bedak, Commented Feb 27, 2017 at 21:55

tony19 · Accepted Answer · 2022-07-15 22:56:59Z

2

i think you should set the initial files data as an empty array not null because v-for will render a list based on an array. read here .

edited Jul 15, 2022 at 22:56

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 28, 2017 at 0:04

ishadif

7312 gold badges9 silver badges20 bronze badges

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

1 Comment

Knobik Over a year ago

exacly what you should do, can confirm.

xTheWolf · Accepted Answer · 2017-02-28 13:38:09Z

0

So using the Vue Dev Tools I saw that my JSON Output was escaped in the files array.

I used a $.parseJSON like so:

new Vue({
        el: '#fileTable',

        data: {
            files: [],
            filesAreReady: false
        },

        created: function(){
            this.fetchData();
        },
        methods: {
            fetchData: function(){
                var self = this;
                $.get(url, function(data){
                self.files = $.parseJSON(data);
                self.filesAreReady = true;
            });
        }
    }
});

Now it works.

answered Feb 28, 2017 at 13:38

xTheWolf

1,9064 gold badges25 silver badges47 bronze badges

Collectives™ on Stack Overflow

VueJS & Laravel: A bunch of empty rows when using v-for on a table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related