【发布时间】:2023-11-09 05:36:01
【问题描述】:
我使用jQuery ajax 请求api 并获取响应,但是无法渲染数据。有人知道如何解决这个问题吗?
var app = new Vue({
//router,
data: {
people: null
},
created: function() {
$.ajax({
url: 'test.php',
}).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({
mode: 'hash',
base: window.location.href,
routes: [
{path: '#/', component: PeopleListing},
{name: 'person', path: '/:id', component: PersonDetail }
]
});
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');
<div id="app">
<router-view class="view"></router-view>
</div>
<template id="people-listing-template">
<ul>
<li v-for="person in people">
{{ person.name }}
<router-link :to="{ name: 'person', params: { id: person.guid }}">View Details</router-link>
</li>
</ul>
</template>
【问题讨论】:
标签: vuejs2