Vuejsはajaxからデータをレンダリングしません

Question

jQuery ajaxを使用してapiをリクエストし、responeを取得しますが、データはレンダリングできません。誰かがこの問題を解決する方法を知っていますか？

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の詳細を取得することができます。