Vue response data storing in html table row

Question

I'm trying to figure out where I'm going wrong. In my VUE script below, the console log is showing my data that I expect (26 records to be exact). So I'm trying to take that data that's successfully dumping and adding to dateEvents so that I can have each record show up as a row in my HTML table. I obviously know my data is coming back in the response, but why can't I see it in my table?

<template>
    <div>
        <table style="width:100%; text-align:center;">
            <thead>
                <tr>
                    <!-- <th>ID</th> -->
                    <th>Title</th>
                    <th>Type</th>
                    <th>Available At:</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ dateEvents.name }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    name: 'hello',
    data () {
        return {
            dateEvents: [],
            config: {
                defaultView: 'month',
                eventRender: function(event, element) {
                    console.log(event)
                }
            },
        }
    },
    created() {
        this.fetchTasks();
    },
    methods: {
      fetchTasks() {
        axios.get('/dashboard/tasks' )
            .then((response) => {
                // handle success
                console.log(response.data);
                this.dateEvents = response.data;
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .finally(function () {
        });
    }
}
}
</script>

George Hanson · Accepted Answer · 2019-08-20 13:58:37Z

2

Looking at the code I am making the assumption that dateEvents is an array. In which case you need to add a v-for to loop through this array of objects. Try updating your template to the following:

<template>
    <div>
        <table style="width:100%; text-align:center;">
            <thead>
                <tr>
                    <!-- <th>ID</th> -->
                    <th>Title</th>
                    <th>Type</th>
                    <th>Available At:</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="dateEvent in dateEvents">
                    <td>{{ dateEvent.name }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

answered Aug 20, 2019 at 13:58

George Hanson

3,0401 gold badge9 silver badges19 bronze badges

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

1 Comment

Geoff_S Over a year ago

Ah man, that worked perfectly! Thank you. So now I can use if statements around it in the same way

PatrickSteele · Accepted Answer · 2019-08-20 13:58:35Z

1

The this in the context of your axios then function is not your Vue instance. You need to save off the Vue instance in a variable:

var vm = this;
axios.get(...)
    .then( response => vm.dateEvents = response.data );

answered Aug 20, 2019 at 13:58

PatrickSteele

14.7k2 gold badges55 silver badges54 bronze badges

2 Comments

George Hanson Over a year ago

this references the Vue component because it is using ES6 style arrow functions.

PatrickSteele Over a year ago

Ah, yes! Missed that. Thanks!

Collectives™ on Stack Overflow

Vue response data storing in html table row

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related