[Vuejs]-Show/Hide columns dynamically with vue.js

by

0👍

You should be more clear when you ask something. Try this

const app = new Vue({
  el: '#app',
  data() {
     return {
       options: [
        { id: 1, name: 'Computer' },
        { id: 2, name: 'Books' },
        { id: 3, name: 'System' }
       ],
       access: [
        { name: 'Student', options: [1, 2] },
        { name: 'Teacher', options: [1, 2] },
        { name: 'Security', options: [3] },
       ],
    };
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table border="1">
    <tr>
      <td v-for="(access, index) in access" :key="index">{{ access.name }}</td>
    </tr>
    <tr>
      <td v-for="access in access">
        <span v-for="option in access.options" :key="access + option">{{ options.find(tempOpt => tempOpt.id === option).name }}&nbsp;</span>
      </td>
    </tr>
  </table>
</div>

Leave a comment