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>