Show hide table column base on selection vuejs

It should be display show, display hide base on checkboxes click it is not working. Can anyone help where is the mistake ?

Once we click on ID it should hide the ID column if we click on first it should hide/show base on checkboxes click and so on with the checkbox event triggered.

<html>
  <head>
    <title>VueJs Demo Example</title>
    <script src="https://unpkg.com/vue@3"></script>
    </script>
  </head>
  <body>
    <h1 id="app">{{ message }}
      <div v-for="field in fields">
        <input type="checkbox" :disabled="visibleFields.length == 1 && field.visible" :key="field.key" v-model="field.visible" inline />
        <label>{{field.label}}</label>
      </div>
      <tr>
        <th> ID </th>
        <th>first</th>
        <th>last</th>
        <th>age</th>
      </tr>
      <div v-for="item in items" :fields="visibleFields">
        <table>
          <tr>
            <td>{{item.id}}</td>
            <td>{{item.first}}</td>
            <td>{{item.last}}</td>
            <td>{{item.age}}</td>
          </tr>
        </table>
      </div>
    </h1>
    <script>
      const {
        createApp
      } = Vue
      createApp({
        data() {
          return {
            items: [{
              id: 1,
              first: 'Mike',
              last: 'Kristensen',
              age: 16
            }, {
              id: 2,
              first: 'Peter',
              last: 'Madsen',
              age: 52
            }, {
              id: 3,
              first: 'Mads',
              last: 'Mikkelsen',
              age: 76
            }, {
              id: 4,
              first: 'Mikkel',
              last: 'Hansen',
              age: 34
            }, ],
            fields: [{
              key: 'id',
              label: 'ID',
              visible: true
            }, {
              key: 'first',
              label: 'First Name',
              visible: true
            }, {
              key: 'last',
              label: 'Last Name',
              visible: true
            }, {
              key: 'age',
              label: 'Age',
              visible: true
            }, ]
          }
        },
        computed: {
          visibleFields() {
            return this.fields.filter(field => field.visible)
          }
        },
      }).mount('#app')
    </script>
  </body>
</html>

I hope it is cleared please do write if anything is required in term of clarifications.

Thanks in advance

Solution

Please take a look at following snippet (you can use v-if and method that returns if column visible or not):

const app = Vue.createApp({
  data() {
    return {
      items: [{id: 1, first: 'Mike', last: 'Kristensen', age: 16}, {id: 2, first: 'Peter', last: 'Madsen', age: 52}, {id: 3, first: 'Mads', last: 'Mikkelsen', age: 76}, {id: 4, first: 'Mikkel', last: 'Hansen', age: 34}, ],
      fields: [{key: 'id', label: 'ID', visible: true}, {key: 'first', label: 'First Name', visible: true}, {key: 'last', label: 'Last Name', visible: true}, {key: 'age', label: 'Age', visible: true}, ]
    }
  },
  computed: {
    visibleFields() {
      return this.fields.filter(field => field.visible)
    }
  },
  methods: {
    isVisible(id) {
      return this.visibleFields.find(v => v.key === id)
    },
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(field, i) in fields" :key="i"> 
    <input type="checkbox" :disabled="visibleFields.length == 1 && field.visible" :key="field.key" v-model="field.visible" inline />
    <label>{{ field.label }}</label> 
  </div>
  <table>
    <tr>
      <th v-for="(field, i) in fields" :key="i"> 
        <label v-if="isVisible(field.key)">{{ field.label }}</label> 
      </th>
    </tr>
    <tr v-for="(item, i) in items" :key="i">
      <td v-for="(itm, key, i) in item" :key="i">
        <div v-if="isVisible(key)">{{ itm }}</div>
      </td>
    </tr>
  </table>
</div>