Monday, February 27, 2017

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

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>@</td>
    <td>@</td>
    <td>@</td>
    <td>@</td>
    <td>@</td>
</tr>

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

<script>
    var url = '';
    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://ift.tt/2l65NaT 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.




via PoTTii

Advertisement