如何在 Vue.js 中过滤数组和循环 V-for

Question

我正在尝试使用 Vue.js 循环数组级别，我可以使用函数 forEach 获取响应 json，例如：

  let filters = []
            const array = response.data
            array.forEach((element) => {
               filters.push(element)
            })
        

然后将数据存储在状态中，有任何方法可以按类型过滤，然后以某种方式循环数据以呈现选择、数据...等。在 Vue.js 中使用 V-for？

我的 json 文件：

     [
  {
    'type': 'filter',
    'datatype': 'str',
    'data': [
      {
        'var_name': 'Gender',
        'options': [
          'Male',
          'Female'
        ]
      }
    ]
  },
    {
      'type': 'filter',
      'datatype': 'date',
      'data': [
        {
          'var_name': 'From',
          'options': []
        }
      ]
    },
    {
      'type': 'range',
      'datatype': 'date',
      'data': [
        {
          'var_name': 'From',
          'options': []
        },
        {
          'var_name': 'To',
          'options': []
        }
      ]
    }
  ]

Answer 1

<div v-for="filter in filters">... </div>

computed: {
    filters() {
        return this.data.filter(item => item.type === 'filter')
    }
}

Answer 2

您可以在 .vue 文件中使用以下代码。

1. 将上述过滤器数组保存到 vue 文件中的数据变量中。

   data() {
      return {
         filters: []
      }
   }
   
   const array = response.data;
   
   array.forEach((element) => {
      this.filters.push(element);
   })
   

2. 在 html 模板中使用 v-for，如下所示。

   <template v-for="oneItem in filters.filter(item => {item.type == 'filter'})"> 
   </template>