Tuesday, May 23, 2017

Accessing Object Properties VueJS

I want to render a list, based on data I provide via my API. I made a screenshot of the current output. The problem is, that I cannot access my object properties. I get an error when loading the page. How do I access the properties correctly? @ did not work.

<div class="row">
    <div class="col-lg-12">
        <ibox title="Einsätze">
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Strasse</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="incident in incidents">
                    <td>@</td>
                </tr>
                </tbody>
            </table>
        </ibox>
    </div>
</div>

export default {
    name: 'dashboard',
    mixins: [MFSApi],

    template: "#dashboard",

    components: {
        ibox
    },

    data() {
        return {
            searchAddress: '',
            incidents: []
        }
    },

    mounted: function() {
        this.getAllIncidents(function(response) {
            this.incidents = response.data["data"];
        }.bind(this))
    },

    methods: {

    },

    created() {
        console.info('Dashboard component triggered');
    }
}

enter image description here



via sesc360

Advertisement