Javascript - как фильтровать данные с несколькими массивами в Vue.js?

Я использую Vue.js 3, и у меня есть фильтр для одного массива в этом случае жанров, но как подключиться к другому массиву, например, здесь для категории? Я пробовал так же, но у меня только дубликат

Может https://stackoverflow.com/users/3330981/tauzn вы может это проверить если вы иметь время?

Вот мой код

<template>
<div>
   <form>
      <input type = "checkbox" name = "drama" v-model = "filters.drama"/>
      <label for = "drama">drama</label>
      <input type = "checkbox" name = "comedy" v-model = "filters.comedy"/>
      <label for = "comedy">comedy</label>
      <input type = "checkbox" name = "horror" v-model = "filters.horror"/>
      <label for = "horror">horror</label>
      <input type = "checkbox" name = "polovno" v-model = "filters.new"/>
      <label for = "new">new</label>
   </form>
   <div v-for = "(movie) in filteredMovies" :key = "movie.title">
      <div>
        {{ movie.title }}
      </div>
    </div>
</div>
</template>

<script>
  export default {
    data: ()=>({
      filters: {
        horror: true,
        comedy: true,
        drama: true,
        new:true,
        old:true,
      },
      movies: [
        { title: 'Movia A', genres: ['horror'], category:['new']},
        { title: 'Movia B', genres: ['comedy'], category:['old']},
        { title: 'Movia C', genres: ['drama'], category:['new']},
        { title: 'Movia D',genres: ['horror'], category:['new']},
      ]
    }),
    computed: {
      filteredMovies(){
        return this.movies.filter( movie => {
          let selectedGenres = Object.keys(this.filters).filter(item => this.filters[item] === true)
    
                    return movie.genres.some(item => selectedGenres.includes(item))
        })
      },
      filteredMoviesByCategory(){
        return this.movies.filter( movie => {

          let selectedCategory = Object.keys(this.filters).filter(item => this.filters[item] === true)
          
           return movie.category.some(item => selectedCategory.includes(item))
        })
      }
    },


  }
</script>

Итак, у меня есть флажки, и это очень хорошо работает для фильтрации по жанрам, но как связать это с работой с другим массивом в этой категории? Я новичок в Vue.js, и это мне очень поможет

Вот Gif, как сейчас все работает Javascript - как фильтровать данные с несколькими массивами в Vue.js?

Это ваш выбор - создавать новые / старые данные таким образом, или они поступают в этом формате. Если в категории может быть только одно чередование двух значений, оно должно быть логическим, например isNew true / false. Если сделать его логическим, это упростит задачу, особенно когда ваш фильтр станет больше. Если у категории могут быть другие значения, добавьте еще несколько.

Bülent Akgül 09.04.2021 18:18

Вы хотите показывать фильмы, которые соответствуют только жанру и категории? Значит, ужасы + старые ничего не дадут? Хоррор + комедия + старая дала бы фильм Б?

Matt Ellen 09.04.2021 18:31

@MattEllen Да, это именно то, что я хочу

Vesko_dev 09.04.2021 18:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
32
0

Другие вопросы по теме