[Vuejs]-How to operate with only one array in composition API Vue 3

by

0👍

✅

You need just 1 computed prop for your searchQuery

You can try this instead

const filteredData = computed(() => {
      let modifiedData = data.value;
      
      if(sorted.value){
        modifiedData = modifiedData.sort((a, b) => {
          return (
             Date.parse(new Date(a.close_approach_data[0].close_approach_date_full)) -
             Date.parse(new Date(b.close_approach_data[0].close_approach_date_full))
          );
        });
      }

      if(searchQuery.value !== ''){
        modifiedData =  modifiedData.filter((asteroid) => {
          return asteroid.name.toLowerCase().indexOf(searchQuery.value.toLowerCase()) != -1;
        });

      }
     
     return modifiedData;
});

In HTML

<div v-for="asteroid in filteredData" :key="asteroid.name">
    <Asteroids :asteroid="asteroid" />
</div>

This way you have sorted as well as filtered data according to searchQuery and all modifications are on original data which you received from api.

Leave a comment