为什么我的VUE数组元素没有被渲染

Question

我可以获取从后端发送的元素。但是文本无法显示。我不知道为什么。这是我的html:

<!-- <form action=""> -->
<div class=" form-group">
<input v-model="wd" @keyup="keyup($event)"  type="text" class="form-control" />
<!-- <ul class="list-group"> -->

<table>

<tr>
<th v-for="item in title"><div style="width:500px">{{item}}</div> </th>
</tr>
<tr v-for="item in arr" :key='item'>
<td>{{item.name}}</td>
<td>{{item.sort}}</td>
<td>{{item.company}}</td>
</tr>
</table>

</div>

这是我的Vue:

el: "#app",
data: {
wd: '', 
arr: [], 
listIndex: -1, 
title:['name','sort','company'],
},
methods: {

keyup(event) {
var url = "/search/search/"
axios.get(url, {
params: {
q: this.wd,
}
}).then(res => {
console.log(res);

this.arr = res.data.list; 



})

}
}
})
;

我知道数据已经得到了。因为循环中的项目数是完全正确的。当我控制台.log(res.data.list(时，我可以从后端查看数据。但它们无法显示在我的页面中。如果你能帮助我，我将不胜感激。谢谢！在此处输入图像描述

Answer 1

我认为问题出在回调中对this.arr的引用中。当AJAX调用返回时，this的作用域是响应，而不是Vue对象。

您可以通过在AJAX调用之前插入一个变量来克服这个问题，如下所示：

var vm = this;
axios.get(url, {

然后，在回调中，而不是this.arr = res.data.list;，执行以下操作：

vm.arr = res.data.list;

Answer 2

字段data必须是反应

data() {
return{
wd: '', 
arr: [], 
listIndex: -1, 
title:['name','sort','company'],
}
}