vue.js遍历ajax请求的数据

<div id="dv" style="text-align: center;">
<div class="head input-group-prepend">
<select class="btn btn-primary" id="sel" v-model="sel">
<option value="ip">按ip地址搜索</option>
<option value="copy">按微信号搜索</option>
<option value="date">按日期搜索</option>
<option value="address">按地区搜索</option>
</select>
<input type="text" name="" class="form-control" v-model="keywords">
</div>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">IP地址</th>
<th scope="col">进入路径</th>
<th scope="col">复制的微信号</th>
<th scope="col">浏览日期</th>
<th scope="col">用户地区</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in search(keywords)" :key="item.id">
<td>{{ i+1 }}</td>
<td>{{ item.ip }}</td>
<td>{{ item.route }}</td>
<td>{{ item.copy }}</td>
<td>{{ item.date }}</td>
<td>{{ item.address }}</td>
<td><a class="btn btn-danger" style="color: #fff" :href="url_mysql(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>

<script type="text/javascript">

function ajax_data(){

　　var result;// 使用对象接收ajax传递回来的数据

　　$.ajax({
　　　　dataType:'json',// 格式为json格式
　　　　url : 'mysql.php',// 请求数据地址
　　　　async:false,//这里选择异步为false，那么这个程序执行到这里的时候会暂停，等待
　　　　//数据加载完成后才继续执行
　　　　success : function(data){
　　　　　　result = data;// 将数据传给用来接收的对象
　　　　}
　　});
　　return result;// 将保存了数据的对象返回
}
var data = ajax_data();// 调用函数，接收函数返回的数据

var xm = new Vue({
　　el:'#dv',
　　data:{
　　　　sel:'ip',
　　　　keywords:'',
　　　　list:[]
　　},
　　methods:{
　　　　add(data){

　　　　　　//　将数据传到 list 中，用于遍历
　　　　　　for (var i = 0;i<data.length;i++) {
　　　　　　　　this.list.push(data[i]);
　　　　　　}
　　　　},　

　　　　search(keywords){
　　　　　　var newarr = this.list.filter(item =>{

　　　　　　　　// 判断 检索的 数据类型 
　　　　　　　　switch(this.sel){
　　　　　　　　　　case 'ip' :

　　　　　　　　　　// 确定了数据类型后，根据字符串判断 list 每一项的对应的数据，输出存在的 list 项
　　　　　　　　　　if (item.ip.includes(keywords)){
　　　　　　　　　　　　return item;
　　　　　　　　　　}break;
　　　　　　　　　　case 'copy' :
　　　　　　　　　　if (item.copy.includes(keywords)){
　　　　　　　　　　　　return item;
　　　　　　　　　　}break;
　　　　　　　　　　case 'date' :
　　　　　　　　　　if (item.date.includes(keywords)){
　　　　　　　　　　　　return item;
　　　　　　　　　　}break;
　　　　　　　　　　case 'address' :
　　　　　　　　　　if (item.address.includes(keywords)){
　　　　　　　　　　　　return item;
　　　　　　　　　　}break;
　　　　　　　　}

　　　　　　})
　　　　　　return newarr;
　　　　},

　　　　// 绑定 href 属性，为他传递参数时，不能直接传递，必须要使用函数return的方式。
　　　　url_mysql(id){
　　　　　　return "./mysql.php?id="+id;
　　　　}
　　}

});

// 调用 vue 对象的add方法，传入数据
xm.add(data);

</script>