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

您只需操作计算属性中的数据，即可通过某个键对其进行分组：

var s3 = new AWS.S3();
var params = {
  Body: buffer,
  Bucket: <bucket>,
  Key: <key>,
  Metadata: {
    'Content-Type': 'image/jpeg'
  }
};
s3.putObject(params, function(err, data) {
  if (err) console.log(err, err.stack); // an error occurred
  else  {
    console.log(data);
  }
})

然后你的v-for将是

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

从以下代码中获取代码：How to group array of objects by key，尚未对所有内容进行测试

Laravel集团以Vue的名字命名

1 个答案: