개체 속성 액세스 VueJS

API를 통해 제공하는 데이터를 기반으로 목록을 렌더링하고 싶습니다. 나는 현재 출력의 스크린 샷을 만들었다. 문제는 개체 속성에 액세스 할 수 없다는 것입니다. 페이지를로드 할 때 오류가 발생합니다. 속성에 올바르게 액세스하려면 어떻게합니까? @{{incident.incidentReference}}가 작동하지 않았습니다.개체 속성 액세스 VueJS

<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 대시 보드

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

나는 뷰 공동에 정의 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-->

출처

2017-05-23 sesc360

무엇이 오류입니까? – thanksd

당신은 이미 그 물건들을 가지고 있죠? 그냥 HTML을 구조화하십시오. ' @ {{incident.incidentReference}} @ {{incident.streetname}} – Chay22

아, 죄송합니다 ... 오류를 언급하는 것을 잊어 버렸습니다. 나는 그것이 내가 일해야한다고 생각하는 것에 동의 할 것이다. 위에서 오류가 발생했습니다. – sesc360

결국, th 여기서 문제는 대시 보드 구성 요소 템플릿이 내에서 내포 된 것입니다. Vue가 래퍼 템플릿을 컴파일 할 때 대시 보드 구성 요소를 자체 템플릿의 일부로 컴파일하려고 했으므로 문제의 오류가 발생했습니다.

출처

2017-05-23 21:31:19 Bert

개체 속성 액세스 VueJS

답변

관련 문제