Vue 2 Laravel 5.3 Группировать объект по одному из значений столбца

Мой проект позволяет клиентам класть товары в корзину. где каждый предмет относится к магазину с shop_id. Я хотел бы перечислить товары в корзине. Однако я хочу, чтобы эти элементы были сгруппированы в таблице для тех, у кого одинаковые shop_id. Таким образом, если клиент купил в 3 разных магазинах, в представлении корзины будет 3 таблицы, каждая из которых состоит из соответствующих товаров, которые клиент купил в этом магазине. Есть ли хороший способ сделать это?

Вот мой незавершенный код Cart.vue для справки, но я не думаю, что он может сильно помочь

<template>
    <div class="row">
    <div class="col-md-12 cart-container">
        <table class="table table-hover" v-for="cart in carts">
        <thead>
          <tr>
            <th>{{cart.shop.name}}</th> //cart includes shop by eloquent
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="cart-img-wrapper">
                <img class="cart-img" :src="cart.product_choice.img1">
              </div>
            </td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        carts:{},
      }
    },
    props:[
    ],
    mounted(){
        this.getCartItems()
    },
    updated(){
    },
    methods:{
        getCartItems(){
            var vm = this
        vm.$http.get('/getCartItems/').then((response)=>{
          vm.carts = response.data
        });
        },
    },
    computed:{
    }
  }
</script>

структура таблицы моих тележек:

    Schema::create('carts', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('product_id')->unsigned();
        $table->integer('product_choice_id')->unsigned();
        $table->integer('user_id')->unsigned();
        $table->integer('shop_id')->unsigned();
        $table->integer('qty');
        $table->integer('complete')->default(0);
        $table->timestamps();
        $table->foreign('user_id')
                ->references('id')
                ->on('users')
                ->onDelete('cascade')
                ->onUpdate('cascade');
        $table->foreign('product_id')
                ->references('id')
                ->on('products')
                ->onDelete('cascade')
                ->onUpdate('cascade');
        $table->foreign('shop_id')
                ->references('id')
                ->on('shops')
                ->onDelete('cascade')
                ->onUpdate('cascade');
        $table->foreign('product_choice_id')
                ->references('id')
                ->on('product_choice')
                ->onDelete('cascade')
                ->onUpdate('cascade');
    });

vuejs2 laravel-5.3
person warmjaijai    schedule 17.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это должно быть решено с помощью запроса GROUP BY к вашей БД. Если вы используете MySql, вы можете написать такие запросы, как это:

SELECT column_name, aggregate_function(column_name)
FROM table_name
WHERE column_name operator value
GROUP BY column_name;

Если у вас есть массив javascript и вы хотите его обработать, вы можете написать метод, подобный следующему:

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

источник

Однако делегирование таких вещей базе данных в целом более эффективно и менее подвержено ошибкам.

person Saurabh    schedule 17.01.2017