Question

我试图在vue js中过滤多维数组。

首先我将axios的响应存储在像

这样的变量中

fetchUsersDetails() {
        var vm = this;
        axios.get('school/api/user',{headers: getHeader()}).then(response => {
            Vue.set(vm.$data, 'userList', response.data.data)
            //console.log(this.userList)
        })
    },

在执行console.log（this.userList）时获取

    0:{
     name:rajesh
     city:dhanbad
     state:jharkhand
     student_session{
      0:{
       class_id:1
       session_id:1
      }
     }
    }
1:{
 name:rohan
 city:dhanbad
 state:jharkhand
 student_session{
  0:{
   class_id:1
   session_id:1
  }
 }
}
 2:{
 name:rahul
 city:dhanbad
 state:jharkhand
 student_session{
  0:{
   class_id:2
   session_id:1
  }
 }
}
 3:{
 name:ramesh
 city:dhanbad
 state:jharkhand
 student_session{
  0:{
   class_id:3
   session_id:1
  }
 }
}

依旧...... 现在在html中

<table class="table">
<tr>
    <th style="display: none">Id</th>
    <th>Sl. No.</th>
    <th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
    <th style="display: none">Id</th>
    <th>Sl. No.</th>
    <th>Name</th>
</tr>
</tfoot>
<tbody>
<tr v-for="(studentDetails, index) in filterUserLists">
    <td style="display: none">{{studentDetails.user_token}}</td>
    <td>{{index+1}}</td>
    <td>
        <a @click="showModal(studentDetails)" data-toggle="modal" data-target="#showModal" >{{studentDetails.first_name}}</a>
    </td>
</tr>
</tbody>

我正在过滤我的userList

filterUserLists: function () {
    if(this.userList)
    {
            var list= this.userList
                   .filter(item => item.student_session.class_id==="1" )
    }
    console.log(list)
},

但我在我的控制台上获得了空列表，但在我的userList中，student_session存在所有值

我是vue js的新手，所以请帮助我谢谢你提前...

Answer 1

这似乎是您的过滤器的一个问题，因为您尝试直接访问secound数组。

对我而言，它有效 userList.filter(item => item.student_session[0].class_id===1 ) 和 userList .filter(item => item.student_session .filter((item2 =>item2.class_id===1 )) )

或者只使用两个循环，就像每个人对二维数组一样。 for(var i =0; i < userList.length; i++){ ... for(var j=0; j < userList[i].student_session.length; j++){ if(userList[i].student_session[j].class_id===1){ ... } } }

如果您声明了filterUserList unter methods，则必须将其用作v-for <tr v-for="(studentDetails, index) in filterUserLists()">

中的函数

您尝试访问属性.user_token和.first_name，但这些属性永远不会被声明。

Answer 2

您可以使用计算机

computed: {
    filterUserLists () {
        var filtered = [];
        for (var i = 0; i < this.userList.length; i++) {
            if (this.userList[i].student_session.class_id == "1") {
                filtered.push(this.userList[i]);
            }
        }
     return filtered;
    }
}

vue js

2 个答案: