Accessing Object Properties VueJS

Question

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? @{{incident.incidentReference}} 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>@{{incident.incidentReference}}</td>
                </tr>
                </tbody>
            </table>
        </ibox>
    </div>
</div>

BASE.JS

// IMPORT ADDONS
import VueEvents from 'vue-events';
import dashboard from './dashboard';
import gis from './gis';
import MFSApi from './mixins/MFSApi';

window.Vue = Vue;
Vue.use(VueEvents);

// Will be called if there is no initMap function in component
window.initMap = () => {
    true
}


var Base = window.App = new Vue({
    el: '#wrapper',

    mixins: [MFSApi],

    components: {
        dashboard,
        gis
    }
});

COMPONENT DASHBOARD

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');
    }
}

I have incidents defined in the Vue Code and loop through the objects that seem to be there according to what you can see above. But I cannot access the content of the objects.

The data I get from the server, when the component

The code for getting the data from the server via API:

export default {
    methods: {
        // Incidents
        getAllIncidents: function(callback) {
            axios.get('api/v1/incidents').then(response => callback(response));
        },

        createIncidentTicket: function(incidentData, callback) {
            axios.post('api/v1/incidents', incidentData).then(response => callback(response));
        }
    }
}

The code for the wrapper where everything is loaded into:

<!-- Wrapper-->
    <div id="wrapper">

        <!-- Navigation -->
        @include('layouts.navigation')

        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">

            <!-- Page wrapper -->
            @include('layouts.topnavbar')

            <!-- Main view  -->
            @yield('content')

            <!-- Footer -->
            @include('layouts.footer')

        </div>
        <!-- End page wrapper-->

    </div>
    <!-- End wrapper-->

You already get those objects, arent you? Just structure your html then, <td>@{{ incident.incidentReference }}</td><td>@{{ incident.streetname }}</td> — Chay22
– Chay22, Commented May 23, 2017 at 19:57
Ah sorry... forgot to mention the error. yep I would agree that is what I thought should work. The error is mentioned above — sesc360
– sesc360, Commented May 23, 2017 at 19:58
validate it first, could be it tries to render just before the array structured. v-if="incidents.length > 0 && typeof incidents[0].incidentReference !== 'undefined" v-for.... or something like that — Chay22
– Chay22, Commented May 23, 2017 at 20:03
But wouldn't it then not render anything at all? The objects itself seem to be available as the table is populated — sesc360
– sesc360, Commented May 23, 2017 at 20:04

Bert · Accepted Answer · 2017-05-23 21:31:19Z

2

In the end, the issue here was the template for the dashboard component was nested inside the template for the Vue. When Vue compiled the wrapper template, it was trying to compile the dashboard component as part of it's own template, which resulted in the error shown in the question.

answered May 23, 2017 at 21:31

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

Accessing Object Properties VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related