如何在 Vuejs 中并排显示 vx-cards

【问题标题】：How to display vx-cards side by side in Vuejs如何在 Vuejs 中并排显示 vx-cards
【发布时间】：2021-04-18 01:54:21
【问题描述】：

我实际上希望并排显示卡片，我正在使用 v-for 来获取内容。

这是我的代码：

   <div v-for="info in infos" v-bind:key="info.id">
        <div class="vx-col w-full md:w-1/2 mb-base">
          <vx-card>
            ...
            My contents goes here
            ... 
          </vx-card>
        </div>
    </div>

我是这样尝试的：

        <div v-for="info in infos" v-bind:key="info.id">
          <div class="vx-row">                               <--- Here what i tried to do
            <div class="vx-col w-full md:w-1/2 mb-base">
              <vx-card>
                ...
                My contents goes here
                ... 
              </vx-card>
            </div>
           </div>
        </div>

目前我的内容是一个接一个（向下）显示的，但我想要并排显示的内容，谁能告诉我该怎么做。

【问题讨论】：

标签： vue.js display card

【解决方案1】：

将.vx-row 类应用于循环外部的元素，然后将.vx-col 类应用于循环插入的元素。

<div class="vx-row"> 
  <div v-for="info in infos" class="vx-col" v-bind:key="info.id">
    <div class="w-full md:w-1/2 mb-base">
      <vx-card>
        ...
        My contents goes here
        ... 
      </vx-card>
    </div>
  </div>
</div>

您希望输出如下（简化）：

<div class="vx-row">
  <div class="vx-col">...</div>
  <div class="vx-col">...</div>
  <div class="vx-col">...</div>
  <div class="vx-col">...</div>
  ...
</div>

这里有一个更简洁的解决方案：

<div class="vx-row"> 
  <vx-card
    v-for="info in infos"
    class="vx-col w-full md:w-1/2 mb-base"
    :key="info.id"
  >
    ...
    My contents goes here
    ... 
  </vx-card>
</div>

【讨论】：