I should not get the table column if I didn't give input field

Question

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

Answer 1

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>