Javascript - 如何在 Vue.js 中使用多个数组过滤数据？

Question

我正在使用 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

Answer 1

我找到了一个解决方案，使用其他虚拟数据但有效。

这是我的代码

<template>
  <h5>List of Products</h5>

        <h3>Filter</h3> 
        <button v-on:click="resetOptions">Reset</button>
        <button v-on:click="sorting">Sorting</button>
        <button v-on:click="sorting2">Sorting2</button>
        <select v-model="category">
            <option value="Accessories">Accessories</option>
            <option value="Laptop">Laptop</option>
            <option value="Stationary">Stationary</option>
        </select> 
         <select v-model="gradovi">
            <option value="Podgorica">Podgorica</option>
            <option value="Niksic">Niksic</option>
            <option value="Herceg Novi">Herceg Novi</option>
        </select> 

        <input type="text" v-model="name" placeholder="Filter By Name"/>

        <label for="vol">Price (between 0 and 1000):</label>

        <input type="range" v-model.trim="range" min="0" max="1000" step="10"/>  
        <ul>
            <li v-for="product in filterProducts" :key="product.name"> Product Name : {{product.name}} - Price : {{product.price}} ({{product.category}}) 
                {{product.gradovi}}
            </li>
        </ul>
</template>

<script>
export default {
 data: ()=> ( {
            gradovi:'',
            category: '',
            name: '',
            range: '0',
            products: [
                { name: "Keyboard", price: 44, category: 'Accessories', gradovi:'Podgorica'},
                { name: "Mouse", price: 20, category: 'Accessories', gradovi:'Niksic'},
                { name: "Monitor", price: 399, category: 'Accessories', gradovi:'Herceg Novi'},
                { name: "Dell XPS", price: 599, category: 'Laptop', gradovi:'Podgorica'},
                { name: "MacBook Pro", price: 899, category: 'Laptop', gradovi:'Podgorica'},
                { name: "Pencil Box", price: 6, category: 'Stationary', gradovi:'Niksic'},
                { name: "Pen", price: 2, category: 'Stationary', gradovi:'Niksic'},
                { name: "USB Cable", price: 7, category: 'Accessories', gradovi:'Herceg Novi'},
                { name: "Eraser", price: 2, category: 'Stationary', gradovi:'Podgorica'},
                { name: "Highlighter", price: 5, category: 'Stationary', gradovi:'Niksic'}
            ]
        }),

              computed: {
            filterProducts: function(){
                return this.filterProductsByName(this.filterProductsByRange(this.filterProductsByCity(this.filterProductsByCategory(this.products))))
            },
        },
        
        methods: {

            filterProductsByCategory: function(products){
                return products.filter(product => !product.category.indexOf(this.category))
            },

            filterProductsByName: function(products) {
                return products.filter(product => !product.name.toLowerCase().indexOf(this.name.toLowerCase()))
            },

            filterProductsByCity: function(products) {
                return products.filter(product => !product.gradovi.indexOf(this.gradovi))
            },

            filterProductsByRange: function(products){
                return products.filter(product => (product.price >= 0 && product.price <= this.range) ? product : '')
            },

            sorting:function(){
                this.products.sort((a,b)=>(a.price > b.price) ? 1 : -1)
            },
             sorting2:function(){
                this.products.sort((a,b)=>(a.price < b.price) ? 1 : -1)
            },

            resetOptions:function(){
                this.category='',
                this.gradovi='',
                this.name='',
                this.range='1000'
            },
        },

}
</script>

<style>

</style>