如何在Vue中使用v-for和两个mysql表来获取所需数据？

问题描述

我在PHPMyAdmin中有两个表的买方和卖方。我想从Vue中的这两个表中获取数据。 我用过sequelize ORM。问题在于它提供了比所需更多的数据。我该如何解决？ 我也尝试过关联，但是它不起作用。它不仅一次提供两个表数据 买方问题或卖方回答。我想先向买家展示问题，然后向卖家展示答案。 请帮我。预先感谢！

   <div id="app">
<div v-for="i in seller" :key="i.id">
    <div v-for="p in buyer" :key="p.id">
         <p>{{i.seller_name}}</p>
         <p>{{p.buyer_name}}</p>
    </div>
</div>

解决方法

您要嵌套两个v-for（买方v-for位于内部卖方v-for）。因此，对于每个卖方，您正在打印每个买方。

我将添加一个将每个卖方与其买方相关联的计算属性：

computed: {
   purchases () {
      const buyers = this.buyer
      return this.seller.map((seller,index) => {
          return {
             seller: seller.seller_name,buyer: buyers[index].buyer_name,}
      }
   }
}

注意：此代码假定卖方和买方是长度相同的数组。如果不是这种情况，则可能需要一些其他检查。

然后在您的模板中：

<div v-for="purchase in purchases" :key="purchase.seller + purchase.buyer">
    <p>{{ purchase.seller }}</p>
    <p>{{ purchase.buyer }}</p>
</div>