Vue.js Card displayDisplaying cards in a Vue

Question

Vue.js Card displayDisplaying cards in a Vue

I've recently started diving into vue.js and I'm honing my skills with vuetify. I've been grappling with this layout for quite some time now but I seem to be stuck. Could someone please guide me through approaching this problem?

I have an array of objects that contains descriptions and images which I aim to display in a specific format as shown in the image below.https://i.sstatic.net/ecrn7.png

The logic behind the layout is as follows - the first card should display a description, the second one, an image. When transitioning to a new row, like the second row, the image should persist just like in the fourth card. The pattern continues with alternating text and image cards starting from the eighth and ninth positions.

<template>
  <div class="home">
    <v-container grid-list-lg>
      <h1>Home</h1>
      <v-layout row>
        <v-flex lg3 v-for="(item, index) in arr" :key="item.id" class="space-bottom">
          <v-card class="mx-auto" max-width="344" outlined>
            <v-list-item three-line>
              <v-list-item-content v-if="index % 2 === 0" height="400px">
                <v-list-item-subtitle>{{item.description}}</v-list-item-subtitle>

                <v-list-item-subtitle class="subtitle-style">
                  <span>
                    <a href="#">Read more</a>
                  </span>
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-hover>
              <template v-slot:default="{ hover }">
                <v-list-item-content v-if="index % 2 !== 0">
                  <img :src="item.imageUrl" />

                  <v-fade-transition>
                    <v-overlay v-if="hover" absolute color="#036358">
                      <v-btn>See more info</v-btn>
                    </v-overlay>
                  </v-fade-transition>
                </v-list-item-content>
              </template>
            </v-hover>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      arr: [ {description: "description 1", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 2", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 3", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 4", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 1", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 1", imageUrl: "https://via.placeholder.com/100"}, 
             {description: "description 1", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 2", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 3", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 4", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 1", imageUrl: "https://via.placeholder.com/100"},
             {description: "description 1", imageUrl: "https://via.placeholder.com/100"}]
    };
  }
};
</script>

<style>
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Currently, the layout looks like this: https://i.sstatic.net/UCOjx.png

javascript html css vue.js vuetify.js

Answer 1

Answer №1

~~Just follow this code snippet:~~

methods: { getCardType(index) { return (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength ? index % 2 ? 'text' : 'img' : index % 2 ? 'img' : 'text' } }

Set rowLength to 4:

Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: '#app', data() { return { rowLength: 4 } }, methods: { getCardType(index) { return (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength ? index % 2 ? 'text' : 'img' : index % 2 ? 'img' : 'text' } } })

#app { display: flex; flex-wrap: wrap; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script> <div id="app"> <div v-for="n in 100" class="card" :style="{flex: `1 0 ${100/rowLength}%`}">{{getCardType(n - 1)}}</div> </div>

~~This can possibly be simplified or adjusted for a different number of items per row.~~

Here's an updated version that maintains the "chekers" pattern on both odd and even column counts:

getCardType(index) {
  return this.rowLength % 2 ||
  (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength
  ? index % 2 ? 'text' : 'img'
  : index % 2 ? 'img' : 'text'
}

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data() {
    return {
      rowLength: 4
    }
  },
  methods: {
    getCardType(index) {
      return this.rowLength % 2 ||
      (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength
      ? index % 2 ? 'text' : 'img'
      : index % 2 ? 'img' : 'text'
    }
  }
})

.columns {
  display: flex;
  flex-wrap: wrap;
}
.card {
  padding: 1rem;
  box-sizing: border-box;
}
.img {
  background-color: #f5f5f5;
}
body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
  <div>Columns: <input type="number" v-model="rowLength"></div>
  <div class="columns">
    <div v-for="n in 100" class="card"
         :style="{flex: `1 0 ${100/rowLength}%`}"
         :class="[getCardType(n - 1)]"
         >{{getCardType(n - 1)}}
    </div>
  </div>
</div>

To clarify, this function will return either img or text based on the parity of the index, but it reverses the condition on even rows when the number of items per row is even.

Answer 2

~~Just follow this code snippet:~~

methods: { getCardType(index) { return (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength ? index % 2 ? 'text' : 'img' : index % 2 ? 'img' : 'text' } }

Set rowLength to 4:

Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: '#app', data() { return { rowLength: 4 } }, methods: { getCardType(index) { return (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength ? index % 2 ? 'text' : 'img' : index % 2 ? 'img' : 'text' } } })

#app { display: flex; flex-wrap: wrap; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script> <div id="app"> <div v-for="n in 100" class="card" :style="{flex: `1 0 ${100/rowLength}%`}">{{getCardType(n - 1)}}</div> </div>

~~This can possibly be simplified or adjusted for a different number of items per row.~~

Here's an updated version that maintains the "chekers" pattern on both odd and even column counts:

getCardType(index) {
  return this.rowLength % 2 ||
  (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength
  ? index % 2 ? 'text' : 'img'
  : index % 2 ? 'img' : 'text'
}

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data() {
    return {
      rowLength: 4
    }
  },
  methods: {
    getCardType(index) {
      return this.rowLength % 2 ||
      (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength
      ? index % 2 ? 'text' : 'img'
      : index % 2 ? 'img' : 'text'
    }
  }
})

.columns {
  display: flex;
  flex-wrap: wrap;
}
.card {
  padding: 1rem;
  box-sizing: border-box;
}
.img {
  background-color: #f5f5f5;
}
body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
  <div>Columns: <input type="number" v-model="rowLength"></div>
  <div class="columns">
    <div v-for="n in 100" class="card"
         :style="{flex: `1 0 ${100/rowLength}%`}"
         :class="[getCardType(n - 1)]"
         >{{getCardType(n - 1)}}
    </div>
  </div>
</div>

To clarify, this function will return either img or text based on the parity of the index, but it reverses the condition on even rows when the number of items per row is even.

Vue.js Card displayDisplaying cards in a Vue

Answer №1

Similar questions

Automatically update div content using AJAX in a different approach

Checkbox click event not triggering properly

Utilizing Dexie-Query for Real-Time Data Updates in Vue

"Troubleshooting: IE compatibility issue with jQuery's .each and .children functions

Creating form elements in ReactJS dynamically and storing their values in an array

Transfer a characteristic from one element to another

Transition CSS applied only to links containing images

AngularJS enables the loading of directives dynamically, but sometimes encounters errors such as "Restricted URI access denied."

Navigating the Google Maps API: Implementing Scroll Zoom to Focus on a Single Marker

Having trouble getting HTML to render properly in React JS on localhost using Apache server

Prevent TypeScript from generalizing string literals as types

"Combining the power of JavaScript countdown with PHP date functionality

Interacting with distant servers within XD plugins

Determining the file path in HTML5

Extracting data from a database using PEAR for Excel: Enumerating columns

What could be the reason for a code running successfully in node but not in the REPL environment?

Creating custom directives in Vue2 is just like adding a functionality similar to v

Hide the drawer when a user clicks on a currently selected tab

Invoking a URL asynchronously on a website

Handling Google-Strategy authentication in a Vue application with passportjs