Laravel以Vue命名的標題組

Question

嘿，我想將按鈕分組到標題下。 在我的控制器中，我有一個組ID和組名。 如果幾個組具有相同的ID，並且我只希望組名出現一次，並且所有按鈕都以該ID分組在該特定組名下。 因此，我想要的是組名只能使用其下的按鈕查看一次。

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

這是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;
        }
    }

這是控制器的一部分：

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

}

Answer 1

您可以只在計算屬性中操縱數據以按特定鍵將其分組：

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));
  }
}

那么您的v-for將是

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

摘自以下代碼： 如何通過鍵對對象數組進行分組 ，還沒有測試全部