[Vuejs]-Dynamic columns how to seperate styles

by

0👍

✅

Working Example

This is just one of many ways you could conditionally render the data based on the number of columns.

Per Vue documentation, you could place the v-for on a template element. And inside use v-if and v-else to render different markup. In this example we check if itemsPerRow == ‘100%’, which indicates that one column is being displayed, and apply different Bootstrap classes.

 <template v-for="item in list"> 
    <div v-if="itemsPerRow == '100%'" class="item card mb-2">
      <img class="card-image-top" src="https://loremflickr.com/320/50/dog">
     <div class="card-body">
      <h5 class="card-title">{{item.title}}</h5>
      {{item.content}}
      </div>
    </div>
    <div v-else class="item alert alert-primary">
    {{ item.title }}
   </div>
  </template>

Snippet

The snippet differs from the original code since it’s an app rather than a component. Selecting 1 column from the dropdown will display a different layout from multiple columns.

const {
  createApp
} = Vue



createApp({
  methods: {},
  watch: {
    itemsPerRow: function(value) {
      document.querySelector(":root").style
        .setProperty("--itemsPerRow", value);
    }
  },
  data() {
    return {
      itemsPerRow: "25%",
      list: []
    }
  },
  mounted() {
    for (let i = 1; i <= 100; i++) {
      this.list.push({
        title: "Title " + i,
        content: "The quick brown fox jumped over the lazy dog"
      });
    }
  }
}).mount('#app')
:root {
  --itemPerRow: 25%;
}

.container {
  margin: 2rem;
}

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  flex-basis: var(--itemsPerRow);
  border: 1px solid black;
  box-sizing: border-box;
  padding: 0.25rem;
}
<div id="app">
  <div class="container">

    <select v-model="itemsPerRow" class="form-control mb-2">
      <option value="25%">4 columns</option>
      <option value="33%">3 columns</option>
      <option value="50%">2 columns</option>
      <option value="100%">1 column</option>
    </select>

    <div class="items">
      <template v-for="item in list"> 
        <div v-if="itemsPerRow == '100%'" class="item card mb-2">
          <img class="card-image-top" src="https://loremflickr.com/320/50/dog">
         <div class="card-body">
          <h5 class="card-title">{{item.title}}</h5>
          {{item.content}}
          </div>
        </div>
        <div v-else class="item alert alert-primary">
        {{ item.title }}
       </div>
      </template>
    </div>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

Leave a comment