Question

这是我关于Nuxt js的vue页面：

<template> 
  <div>
   <select
    id="category"
    name="category"
    v-model="selected">
     <option value="0">categories</option>
     <option value="1">1</option>
     <option value="2">2</option>
   </select>
   <services-list :list="services.list" /> 
 </div>
<template>

export default {
  components: {
    ServicesList
  },
  data() {
    return {
      services: {
        list: [
          {
            name: 'NAME1',
            title: 'TITLE1',
            category: '1'
          },
          {
            name: 'NAME2',
            title: 'TITLE2',
            category: '2'
          },
         }
        }
       }

我需要根据<select>中选定的类别过滤呈现的数据。我尝试在<select>更改时更改状态，但这仅在第一次时有效。因为处于状态的数据将发生更改，并且第二次运行将无法获得正确的结果。

Answer 1

要从list获取经过过滤的selected，请使用computed

computed{
  filtered(){
    if (this.selected === null) return this.services.list
    return this.services.list.filter(s => s.category === this.selected)
  }
}

然后，您可以在模板中使用filtered

Answer 2

  computed: {
    filtered() {
      if (this.selected === null) return this.services.list
      return this.services.list.filter(obj => obj.category === this.selected)
    }
  }

如何按类别过滤数据数组？

2 个答案: