Question

嘿我想在标题下分组按钮。我用Vue尝试了几种方法，但似乎都没有。我也没有太多错误。我想要做的是在特定标题下分组按钮。我正在使用Laravel和Vue。有两个计算函数 - 我试过两个，所以我也把它们放在这里。

以下是Controller中我的数组的一部分：

       $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'
    ],
    }

这是我的Vue组件：

    <div v-for="(commands, groupName) in grouped">
    <h4>@{{ groupName }}</h4>
  </div>
    <div class="col-md-12">
      <div class="btn-group" v-for="command in commands">

        <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>

我的计算：

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

        grouped: function(){
          return _.mapValues(_.groupBy(this.commands, 'groupName'),
                      clist => clist.map(commands => _.omit(this.commands, 'groupName')));

        },

    },

Answer 1

您已删除该输入标记并放入按钮标记，它将起作用

Answer 2

<div class="btn-group">
    <button type="button" class="btn btn-primary">btn-1</button>
    <button type="button" class="btn btn-primary">btn-2</button>
    <button type="button" class="btn btn-primary">btn-3</button
</div>

Vue Group By Headings not Grouping

2 个答案: