Question

我想要打印出在20小时或同一天后开始的时间段的电影。无论哪种方式，我都无法让它发挥作用。

组件数据结构：

name=fonts/FuturaMaxi/[name].[ext]

模板：

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>

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>

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

1 个答案: