I created a few input fields and created a table for fetching those details.

If I didn't give input for one of the fields means, I need to hide that particular column...

I tried by using

<td(v-if="array[key]!== null"{{....}}</td> 

But when I not giving input, my header(row and column)is still showing but data is hidden

CodePudding user response：

If you want to hide the header row, then you need to provide it also with an v-if condition. You could also hide the whole table.

Here is a playground.

 const { ref, reactive, createApp } = Vue;
  
 const App = { 
   data() {
      return {
        showTable: true,
        showHead: true,
        showBody: true
      }
    }
}
 
 const app = createApp(App)
 app.mount('#app')

<div id="app">
  <button @click="showTable = !showTable">Table</button>&nbsp;
  <button @click="showHead = !showHead">Head</button>&nbsp;
  <button @click="showBody = !showBody">Body</button>
  <br /><br />
  <table border=1 v-if="showTable">
  <thead v-if="showHead"><tr><th>Column 1</th><th>Column 2</th></thead>
  <tbody v-if="showBody"><tr><td>1</td><td>2</td></tbody>
  </table>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>