访问对象属性VueJS

Question

我想根据我通过API提供的数据来呈现一个列表。我做了一个当前输出的屏幕截图。问题是，我无法访问对象属性。加载页面时会出现错误。如何正确访问属性？@{{incident.incidentReference}}没有工作。

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

组件仪表板

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

​

​

我在Vue代码中定义了incidents，并根据上面所看到的，循环遍历似乎在那里的对象。但是我不能访问对象的内容。

我从服务器获得的数据，当组件

​

​

通过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));
        }
    }
}

将所有内容加载到其中的包装器的代码：

<!-- 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-->

Answer 1

最后，这里的问题是仪表板组件的模板嵌套在Vue的模板中。当Vue编译包装模板时，它试图将仪表板组件编译为它自己的模板的一部分，这会导致问题中显示的错误。