[Vuejs]-Can a Vuetify data table be hidden if it has no results?

by

0👍

I came up with a solution. It is certainly not the cleanest but it got the job done for me.

I created the methods below. It is entirely independent of the datasource filter, and just uses the same input that I use for the datasource filter (the org object).

methods: {
    hasAnyValues(org, datasource) {
      if(org == null){
        return true;
      } else if (this.checkForOrgs(org, datasource)) {
        return true
      } else {
        return false
      }
    },
    checkForOrgs(org, datasource){
      for(let i = 0; i < datasource.config.data.length; i++){
        if(parseInt(datasource.config.data[i].client_id) == org.id){
          return true;
        } else {
          continue;
        }
      }
      return false;
    }
}

I then used this method in a v-if statement where I create the cards in the template:

<v-col v-for="datasource in editedDatasources" :key="datasource.id" cols="6" >
        <v-card elevation="5" v-if="hasAnyValues(selectedOrg, datasource)">

0👍

         <template slot="no-results">
            <div class="no-data-wrapper">
                <div class="pa-15">
                    <img src="../../../assets/images/search-icon.svg" width="40px" height="42px" alt="">

                    <h3> No matching result </h3>
                    <p>
                        Sorry! We could not find any invoice that matches<br>
                        your search term.
                    </p>

                    <div class="mt-4">
                        <v-btn color="primary" outlined class="add-supplier">
                            Try Different Search
                        </v-btn>
                    </div>
                </div>
            </div>
        </template>

Leave a comment