How to display vx-cards side by side in Vuejs

Question

I am actually looking to display the cards side by side, i am using v-for in order to get the contents.

Here is my code:

   <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>

I tried it this way:

        <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>

Currently my contents are displayed one after another(downwards), but i want the contents side by side, can anyone please tell me what to do.

Answer 1

Apply the .vx-row class to an element outside the loop and then the .vx-col class to the element that are inserted by the loop.

<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>

You want the output to be as follows (simplified):

<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>

Here's a more concise solution:

<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>