如何在VueJS中通过对象属性过滤对象数组

Question

我想打印出电影场次的时间，在小时20之后或者同一天开始。无论哪种情况，我都无法让它工作。

组件数据结构：

day:"2017-06-08T18:34:27.211Z"
movies:Array[8]
0:Object
   Description:"orphan the becomes a famous magician "
   id:1
   movieName:"Harry Potter "
   time_session:Array[3]
     0:Object
       id:1
       pivot:Object
       time:"2017-06-14 00:00:00"
     1:Object
     2:Object
1:Object
2:Object
3:Object
4:Object

模板：

<template>
  <div> 
    <li v-for="movie in filteration(movies)">{{movie.movieName}}</li>
  </div>
</template>

我该如何过滤电影，使得显示的电影依赖于同一对象中的时间会话？

以下是我尝试过的方法：

<script>
  export default{
    data() {
      return {
        movies:[],
        day:moment()
      }
    },  
    mounted(){
      axios.get("/fa")
        .then(response  => this.movies = response.data);
    },
    methods:{
      filteration(movie){
        return movie.filter(this.time);
      },
      time(movie){
        return moment(movie.time_session.time).hour() > 20;
        // return moment(movie.time_session.time).isSame(this.day,'day');
      }    
    }
  }     
</script>

- Ahmed Al-Said

---

“开始时间在20点后或当天的时间段”是什么意思？什么是时间段？您能详细解释一下筛选条件吗？ - thanksd

每个电影都有时间段，如您所见，时间段是一个包含对象的数组，每个对象都有不同的日期和时间，因此我希望仅打印与我的筛选条件相对应的电影。在这里，我希望它是时间或日期...希望我能解释清楚。 - Ahmed Al-Said

晚上8点我期望的是20。 - Bert

是的，它不起作用，即使我也使用了相同的日期条件。我的代码需要进行一些修正。 - Ahmed Al-Said

Answer 1

你遇到问题的最可能原因是你将movie.time_session.time传递给了moment。但是，movie.time_session是一个包含多个场次的数组，没有time属性。你可能需要比较time_session数组中每个元素的时间。

通常，在Vue中显示筛选数据的最佳方法是创建一个计算属性，对数据进行筛选并返回它。

在你的情况下，你可以创建一个计算属性filteredMovies来返回筛选后的电影，并在模板中使用它。

computed: {
  filteredMovies() {
    return this.movies.filter((movie) => { 
      return movie.time_session.reduce((acc, session) => {
        return acc || (moment(session.time).hour() > 20);
      }, false);
    });
  }
}

然后，在你的模板中，像这样引用filteredMovies:

<li v-for="movie in filteredMovies">{{movie.movieName}}</li>

- thanksd