オブジェクトのプロパティにアクセスするVueJS

Question

私はAPIを使って提供するデータに基づいてリストをレンダリングしたい。私は現在の出力のスクリーンショットを作りました。問題は、オブジェクトのプロパティにアクセスできないことです。ページを読み込む際にエラーが発生します。プロパティに正しくアクセスするにはどうしたらいいですか？ @{{incident.incidentReference}}は機能しませんでした。

​​

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ダッシュボード

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

最後に、thここでの問題は、ダッシュボードコンポーネントのテンプレートがの中に入れられており、のVueのテンプレートです。 Vueがラッパーテンプレートをコンパイルすると、ダッシュボードコンポーネントを独自のテンプレートの一部としてコンパイルしようとしていたため、質問にエラーが表示されました。