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

Posted 2023-02-22

【中文标题】如何在 Vue.js 中过滤数组和循环 V-for

【英文标题】：How to filters array and loop V-for in Vue.js

【发布时间】：2020-11-07 20:30:22

【问题描述】：

我正在尝试使用 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': []
        
      ]
    
  ]

【参考方案1】：

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

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

【参考方案2】：

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

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

data() 
   return 
      filters: []
   


const array = response.data;

array.forEach((element) => 
   this.filters.push(element);
)

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

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

【讨论】：

我建议将此过滤后的列表包装在计算属性中，它们会被缓存，只要您不更改原始列表，这将使您的代码更快。