[Vuejs]-In Vue JS , How to display Table Header after getting the Server Response?

by

0👍

✅

You can achieve it by using the boolean property.

<template>
   <div>
      <table v-if="showTable">
         ...
         <tr v-if="posts.packageIDs.length === 0">
             <td colspan={columnsCount}> No Records Found </td>
         </tr>
      </table>
   </div>
</template>

<script>
    export default {
       data () {
          return {
              showTable: false,
              posts: {
                  packageIDs: []
              }
          };
       },
       methods: {
          fetchPackageIDs(e) {
           this.showTable = false;
           axios.get({url})   
          .then(response=>this.posts.packageIDs=response.data)
          .catch(e => {console.log(e);})
          .finally(() => this.showTable = true)
         }
       }
    }
</script>

Leave a comment