Vuejs不呈現來自ajax的數據

Question

我使用jQuery ajax來請求api並獲取響應，但數據無法呈現。有人知道如何解決這個問題嗎？

var app = new Vue({ 
 
    //router, 
 
    data: { 
 
     people: null 
 
    }, 
 
    created: function() { 
 
     $.ajax({ 
 
     url: 'test.php', \t \t \t 
 
     }).done(function(res){ 
 
     console.log(res); 
 
     this.people = JSON.parse(res); 
 
     //console.log('124234234523'); 
 
     //console.log(this.people.name); 
 
     }); 
 
    } 
 
    }).$mount('#app');

<div id="app"> 
 
     <ol> 
 
     <li v-for="person in people"> 
 
      {{ person.name }} 
 
     </li> 
 
     </ol> 
 
    </div> 
 

 
     
 

代碼中使用VUE路由器： 雖然我使用Vue的路由器，甚至我用箭頭功能。模板不能由Vue渲染。我是否濫用Vue路由器？

// Listing people component 
 
var PeopleListing = Vue.extend({ 
 
    template: '#people-listing-template', 
 
    data: function() { 
 
     return { 
 
     people: this.$parent.people 
 
    } 
 
    } 
 
}); 
 

 

 
// Create the router 
 
var router = new VueRouter({ 
 
\t mode: 'hash', 
 
\t base: window.location.href, 
 
\t routes: [ 
 
     {path: '#/', component: PeopleListing}, 
 
     {name: 'person', path: '/:id', component: PersonDetail } 
 
    ] 
 
}); 
 

 

 

 

 
var app = new Vue({ 
 
    router, 
 
\t data: { 
 
\t \t people: null 
 
\t }, 
 
\t created: function() { 
 
\t \t 
 
\t \t $.ajax({ 
 
\t \t \t url: 'test.php', \t \t \t 
 
\t \t }).done((res) =>{ 
 
\t \t \t //console.log(res); 
 
\t \t \t this.people = JSON.parse(res); 
 
\t \t \t //console.log('124234234523'); 
 
\t \t \t //console.log(this.people.name); 
 
\t \t }); 
 
\t } 
 
}).$mount('#app');

<div id="app"> 
 
\t <router-view class="view"></router-view> 
 
</div> 
 
    
 
    <template id="people-listing-template"> 
 
    <ul> 
 
\t \t 
 
     <li v-for="person in people"> 
 
     {{ person.name }} 
 
     <router-link :to="{ name: 'person', params: { id: person.guid }}">View Details</router-link> 
 
     </li> 
 
    </ul> 
 
    </template>

Answer 1

範圍的，這是創建問題，使用箭頭之類的函數如下：

var app = new Vue({ 
//router, 
data: { 
    people: null 
}, 
created: function() { 
    $.ajax({ 
    url: 'test.php',    
    }).done((res) => { 
    console.log(res); 
    this.people = JSON.parse(res); 
    //console.log('124234234523'); 
    //console.log(this.people.name); 
    }); 
} 
}).$mount('#app'); 

你能得到關於這個問題here更多細節。