Laravel group Headings by name with Vue

Question

Hey I want to group buttons under headings. In my Controller I have a Group ID and Group Name. If several groups have the same ID, and I only want the group name to appear once and all the buttons grouped under that specific group name with the ID. So what I want is that a group name must view only once with the buttons under it.

Here is the HTML:

    <div class="col-md-12">
      <div class="btn-group" v-for="command in commands">
        <div v-if="command.groupID == groupId">
          <h4>@{{ command.groupName }}</h4>
        </div>

        <commands-component
                :entity-config="commandConfig(command.id, command.signature, command.arguments, command.title, command.groupID, command.groupName)">
                <input type="button" class="btn btn-primary btn-block" v-bind:value="command.title">
        </commands-component>
      </div>
    </div>

Here is the Vue:

    methods: {

        commandConfig: function(ident, signature, arguments, title, groupId, groupName){
            $data = {

                id: { text: 'commandModal' + ident, id: null },
                modalTitle: title,
                buttons: [
                    {
                        buttonTitle: 'Run Command',
                        buttonClass: 'btn btn-success pull-right',
                        submitUrl: {
                            url: '/admin/artisan/commands/run',

                        },
                    }
                ],
                attributes: [
                {name: "message", displayName: "Are you sure you want to proceed with the command?", type: "action-text",  col: "12" },
                {name: "signature", displayName: "Command Signature", type:'text', col:"12"}
                ],
                data: {
                    signature:signature,
                }
            }
            return $data;
        }
    }

here is a part of the controller:

     public function index() {
  $users = User::all();



  $commands = [
    [
      'id' => 1,
      'signature' => 'sync:whatever',
      'arguments' =>'',
      'title' =>'Sync Whatever',
      'groupID' => 1,
      'groupName' => 'GroupOne'
    ],

    [
      'id' => 2,
      'signature' => 'send:whatever',
      'arguments' =>'users',
      'title' =>'Send Whatever',
      'groupID' => 1,
      'groupName' => 'GroupOne'
    ],

    [
      'id' => 3,
      'signature' => 'sync:something',
      'arguments' =>'',
      'title' =>'Sync Something',
      'groupID' => 2,
      'groupName' => 'GroupTwo'
    ],

}

Jeff · Answer 1 · 2017-11-03T13:19:06.810

0

You can just manipulate your data in a computed property to group it by a certain key:

computed: {
  groupedCommands(){
    return this.commands.reduce(function (r, a) {
      r[a.groupName] = r[a.groupName] || [];
      r[a.groupName].push(a);
      return r;
    }, Object.create(null));
  }
}

Then your v-for would be

<div v-for="(commands, groupName) in groupedCommands">
  <h4>@{{ groupName }}</h4>
  <div v-for="command in commands">

Took code from: How to group array of objects by key , haven't tested it all

edited Nov 03 '17 at 13:19

answered Nov 03 '17 at 13:03

Jeff

24,623
4
69
78

try changing the order of the v-for argument to `(commands, groupName)`, I think i had the key and values backwards. Are you using Vue DevTools? What didnt work about it? – Jeff Nov 03 '17 at 13:20
Yes I am using Vue Devtools and I received no error whatsoever, just blank page. My component also wouldnt show under my Vue console. I also played around with the v-for – horcrux88 Nov 03 '17 at 13:21

Laravel group Headings by name with Vue

1 Answers1