如何在 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')
    }
}