VueJ에서 개체 속성별로 개체 배열을 필터링하는 방법s

VueJ에서 개체 속성별로 개체 배열을 필터링하는 방법s

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>

문제가 있는 가장 큰 이유는 합격했기 때문입니다.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>

언급URL : https://stackoverflow.com/questions/44444455/how-to-filter-array-of-objects-by-object-property-in-vuejs