Vue.js에서 어레이를 필터링하고 V-for를 루프하는 방법

Vue.js에서 어레이를 필터링하고 V-for를 루프하는 방법

Vue.js를 사용하여 어레이 레벨을 루프하려고 합니다.각 기능에 대한 액션에서 다음과 같은 응답을 얻을 수 있습니다.

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

그런 다음 저장된 데이터를 TYPE으로 필터링하고 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': []
        }
      ]
    }
  ]

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

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

.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>
   

언급URL : https://stackoverflow.com/questions/62964042/how-to-filters-array-and-loop-v-for-in-vue-js