CODEWITHSUNDEEP
javascriptvue.jsvuejs3vuex
simon
simon

Reputation: 375

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

Upvotes: 1

Views: 1327

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

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>

Upvotes: 2

Related Questions