I have some menus in table. There are some sub-menus under the menus. I want to display them in a table. I am trying this--

new Vue({
      el: '#app',
      data: function() {
        return {
          menus: [
    { id: 1, menuName: "Tech 1" },
    { id: 2, menuName: "Tech 2" },
    { id: 3, menuName: "Tech 3" }],
         selectedMenu: [],
        submenus: [
    { id: 1, menuId: 1, subMenuName:"architecture" },
    { id: 2, menuId: 1, subMenuName:"Electrical" },
    { id: 3, menuId: 1, subMenuName:"Electrical" },
    { id: 4, menuId: 2, subMenuName:"IEM" },
    { id: 5, menuId: 3, subMenuName:"CIVIL"}],
    
        }
      },
      computed: {
          filteredProduct: function () {
            const app = this,
              menu = app.selectedMenu;

            if (menu.includes("0")) {
              return app.submenus;
            } else {
              return app.submenus.filter((p) =>                  menu.includes(p.menuId));
            }
          },
        },
       })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"
><div id="app">
            <table >
                  <thead>
                    <tr>
                      <th>Menu</th>
          <label><input type="checkbox" v-model="selectedMenu" value="0" />
          All</label</th>
                      <th>Submenu</th>
                     </tr>
                  </thead>
                  <tbody>
                    <tr v-for="menu in menus" :key="menu.id">
                      <td>
                        <label>
                          <input
                            type="checkbox"
                            :value="menu.id"
                            v-model = "selectedMenu"
                          />{{ menu.menuName }}
                          </label
                        >
                      </td>
                      <td>
                        <ul>
                          <li
        v-for="submenu in filteredProduct"
                         :key="submenu.id">
                      <input type="checkbox" :value="submenu.id"/>
                       <label>{{ submenu.subMenuName }}  </label>
                          </li>
                        </ul>
                      </td>
                     
                    </tr>
                  </tbody>
                </table>
              
    </div>

My problem is, When I click on any menu, The submenus are showing on other columns too.

When I click on any menu, the submenus associated with that menu should display in that particular row. How do I do this?

CodePudding user response：

You should add Submenu Object inside Menus. for your data object i have updated code as below. you need to maintain the selected menu id to toggle the submenus.

  var app =  new Vue({
  el: "#app",
  data: {
      menus: [
    { id: 1, menuName: "Tech 1" },
    { id: 2, menuName: "Tech 2" },
    { id: 3, menuName: "Tech 3" }],
         selectedMenu: [],
        submenus: [
    { id: 1, menuId: 1, subMenuName:"architecture" },
    { id: 2, menuId: 1, subMenuName:"Electrical" },
    { id: 3, menuId: 1, subMenuName:"Electrical" },
    { id: 4, menuId: 2, subMenuName:"IEM" },
    { id: 5, menuId: 3, subMenuName:"CIVIL"}],
    
  },
   computed: {
          filteredProduct: function () {
            const app = this,
              menu = app.selectedMenu;

            if (menu.includes("0")) {
              return app.submenus;
            } else {
              return app.submenus.filter(function(item){
      return menu.indexOf(item.menuId) >= 0;
    });
            }
          },
        },
  methods: {

    setSelectedMenu:function(event,menu_id){
  
  if (event.target.checked) {
            this.selectedMenu.push(menu_id);
      }
      else{
       var index= this.selectedMenu.indexOf(menu_id);
        this.selectedMenu.splice(index,1);
      }
    }
  }
})

Here is HTML :

 <table >
<thead>
   <tr>
   <th>Menu</th>
       <label><input type="checkbox" v-model="selectedMenu" value="0" />
      All</label>
   <th>Submenu</th>
    </tr>
 </thead>
  <tbody>
      <tr v-for="menu in menus" :key="menu.id">
         <td>
                    <label>
                      <input
                        type="checkbox"
                        :value="menu.id" @change="setSelectedMenu($event,menu.id)"
                      />@{{ menu.menuName }}
                      </label
                    >
                  </td>
                  <td >
                    <ul>
                      <li
    v-for="submenu in filteredProduct"
                     :key="submenu.id"  v-if="menu.id == submenu.menuId">
                    
                            <input type="checkbox" :value="submenu.id"  />
                             <label  >{{ submenu.subMenuName }}  </label>
                            
                      </li>
                    </ul>
                  </td>
                 
                </tr>
              </tbody>
            </table>

I have also created working fiddle:

https://jsfiddle.net/n9502h71/1/

Also if you want to select multiple values you should push selected values in array.