vue通过条件获取后台对应数据显示在表格

先看运行结果：
正确结果图：

图1.运行界面图

图2.查询结果图

正确代码：（注:要想查看后台数据可以点击 https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata这个链接）
< template>
< div class=“show-examples”>

< el-input placeholder="keyword" v-model="keyword" suffix="el-icon-search"  @change="getblogData"></el-input>&nbsp;

<el-table :data="blogData" style="width: 100%">

<el-table-column prop="id" label="#" width="180">
</el-table-column>

<el-table-column prop="name" label="姓名" width="180">
</el-table-column>

<el-table-column prop="sex"  label="性别">
</el-table-column>

<el-table-column prop="address" label="住址">
</el-table-column>
</el-table>
</div>

< /template>

< script >
import axios from ‘axios’
export default{
name:‘show-examples’,
data(){
return{
blogData:[],
keyword:’’,
}
},
created(){
axios.get(‘https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata’) .then((res)=>{
this.blogData=res.data.data.message;
})
},
methods:{
getblogData(){
axios.get(‘https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata’) .then((res)=>{
this.blogData=[];
for(var i=0;i<res.data.data.total;i++){
if(this.keyword == res.data.data.message[i].id || this.keyword == res.data.data.message[i].name || this.keyword == res.data.data.message[i].address){
this.blogData.push(res.data.data.message[i]);
}
if(this.keyword==’ '){
this.blogData=res.data.data.message;
}
}
})
}
}
}
< /script>
< style >< /style>

错误之解析：（注意的地方已在正确代码中加粗显示）

1.当成功从后台获取数据之后，要根据条件来获取对应数据用表格显示出来，要注意根据条件获取到的数据是一个对象而不是一个数组，所以需要把对象添加到数组中。
即要写成： this.blogData.push(res.data.data.message[i]) 千万不要写成：this.blogData=res.data.data.message[i]（我之前就是这样写而一直弄不出结果）

2.在把查询的对象添加到表格之前，注意要先把表格数组清空。即 this.blogData=[];
如果没有这一行代码，则结果为：