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

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

我在Vue Code中定义了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编译了包装器模板时，它试图将仪表板组件编译为它自己的模板的一部分，这导致了问题中显示的错误。

访问对象属性VueJS

1 个答案: