在将数据从数据库推送到网页时,我在使用 vue.js 时遇到了问题。我正在使用将数据转换为 Jason 的 laravel 5.3。代码将要获取的记录数发布到服务器,然后服务器响应我要在网页上显示的数据。这是 Vue js 代码
new Vue({
el: "#projects",
data: {
count: 0,
fetched_projects: []
}
methods:{
checkproject: function(){
var fetch = this.count += 4;
axios.post('/loadmore', {fetch: fetch })
.then(function(response) {
this.fetched_projects.push(response.data);
})
.catch(function(error){
console.log(error);
});
}
HTML
<div class="row">
<div class="col-md-3">
<ul v-for="more_projects in fetched_projects">
<li>@{{ more_projects }}</li>
</ul>
</div>
</div>
Laravel Controller
public function setloadMore(Request $request){
$new_projects = $request->fetch;
$results = Model1::with('relation')->take($new_projects)->get();
return $results;
}
问题出在 this.fetched_projects.push(response.data);
上,它给我“无法读取未定义的属性‘push’”
最佳答案
你希望 this
成为你的组件,所以使用箭头函数:
methods:{
checkproject: function(){
var fetch = this.count += 4;
axios.post('/loadmore', {fetch: fetch })
.then(response => {
this.fetched_projects.push(response.data);
})
.catch(function(error){
console.log(error);
});
}
关于javascript - vue js ajax调用无法读取未定义的属性 'push',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43070412/