显示所有店铺以及店铺下的所有商品

怎么才能实现从数据库获取所有店铺以及店铺里面的所有商品啊，就是这种显示

img

数据库我建的表是一个商品对应一个店铺

img

然后使用group by 店铺 获取的话，他全都获取出来了，但是实在一个数组里面，页面上我又不知道怎么循环显示，商品和店铺构不成父子关系啊

要从数据库获取所有店铺以及店铺里面的所有商品，你需要使用Vue.js的组件和Axios库来发送HTTP请求到后端API，以获取所需数据。
以下是一个基本的Vue组件示例，用于显示所有店铺和其商品：


```javascript
<template>
  <div>
    <h2>所有店铺</h2>
    <ul>
      <li v-for="store in stores" :key="store.id">
        {{ store.name }}
        <ul>
          <li v-for="product in store.products" :key="product.id">
            {{ product.name }} - {{ product.price }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      stores: []
    }
  },
  mounted() {
    axios.get('/api/stores')
      .then(response => {
        this.stores = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

```

这个组件会通过Axios发送HTTP GET请求到/api/stores路由，并在响应中获取所有店铺的数据。然后，它会将数据存储在Vue实例的stores属性中，以便在模板中渲染。

在模板中，我们使用v-for指令遍历所有店铺和其商品，并显示它们的名称和价格。

你需要根据你的具体业务逻辑和后端API来修改这个组件。