Rendering lists dynamically in VueJS

I am struggling to showcase the images and their accompanying content on a VueJS web page. I'm facing an issue with organizing them in a row, with a maximum of 4 elements per row.

<div className="container" style="padding-top: 1rem; width: 100%; min-height: 600px">
  <div class="columns">
    <div class="column">
      <div class="card" style="width: 15rem; height: 15rem; margin: 20px" v-for="(image, index) in allImagesData"
           :key="index">
        <img class="card-img-top" :src='image.media_url' alt="Image" style="max-height: 12rem; max-width: 10rem;">
        <p>{{ image.platform }}</p>
        <p>{{ image.count }}</p>
      </div>
    </div>
  </div>
</div>  

The images are currently displayed vertically, but I need them to be arranged horizontally.

https://i.sstatic.net/EoNMw.png

Could someone assist me in achieving a horizontal display of the images? The number of elements in the list varies each time.

Answer №1

Explore using flex in a column layout:

const app = Vue.createApp({
  data() {
    return {
      allImagesData: [{platform: 1, count:1, media_url: 'https://picsum.photos/200'}, {platform: 5, count:5, media_url: 'https://picsum.photos/200'}, {platform: 2, count:2, media_url: 'https://picsum.photos/200'}, {platform: 3, count:3, media_url: 'https://picsum.photos/200'}, {platform: 4, count:4, media_url: 'https://picsum.photos/200'}],
    };
  },
})
app.mount('#demo')
.column {
  display: flex;
  flex-wrap: wrap;
}
.card {
  flex: 1 0 21%;
  border: 1px solid grey;
  border-radius: 5px;
}
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div className="container" style="padding-top: 1rem; width: 100%; min-height: 600px">
    <div class="columns">
      <div class="column">
        <div class="card" style="max-width: 15em; height: 15em; margin: 20px" v-for="(image, index) in allImagesData"
             :key="index">
          <img class="card-img-top" :src='image.media_url' alt="Image" style="max-height: 12rem; max-width: 10rem; border-top-left-radius: 5px; border-top-right-radius: 5px;">
          <p>{{ image.platform }}</p>
          <p>{{ image.count }}</p>
        </div>
      </div>
    </div>
  </div>  
</div>

Answer №2

Seems like everything is functioning properly

<template>
  <div class="columns">
    <div v-for="image in allImagesData" :key="image.platform" class="column"gt;
      <img class="fitting-image" :src="image.media_url" />
      <p>{{ image.platform }}</p>
      <p>{{ image.count }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allImagesData: [
        {
          platform: 'facebook',
          media_url: 'https://source.unsplash.com/random/200x200?sig=1',
          count: 12,
        },
        {
          platform: 'twitter',
          media_url: 'https://source.unsplash.com/random/200x200?sig=2',
          count: 15,
        },
        {
          platform: 'instagram',
          media_url: 'https://source.unsplash.com/random/200x200?sig=3',
          count: 4,
        },
        {
          platform: 'mastodon',
          media_url: 'https://source.unsplash.com/random/200x200?sig=4',
          count: 664,
        },
        {
          platform: 'discord',
          media_url: 'https://source.unsplash.com/random/200x200?sig=5',
          count: 15,
        },
        {
          platform: 'discord2',
          media_url: 'https://source.unsplash.com/random/200x200?sig=6',
          count: 15,
        },
        {
          platform: 'discord3',
          media_url: 'https://source.unsplash.com/random/200x200?sig=7',
          count: 15,
        },
        {
          platform: 'discord4',
          media_url: 'https://source.unsplash.com/random/200x200?sig=8',
          count: 15,
        },
        {
          platform: 'discord5',
          media_url: 'https://source.unsplash.com/random/200x200?sig=9',
          count: 15,
        },
        {
          platform: 'discord6',
          media_url: 'https://source.unsplash.com/random/200x200?sig=10',
          count: 15,
        },
      ],
    }
  },
}
</script>

<style scoped>
.columns {
  display: grid;
  --gap: 1rem; /* adjust this value to change the space between elements */
  grid-template-columns: repeat(auto-fit, minmax(auto, calc(25% - var(--gap))));
  gap: var(--gap);
}
.column {
  background: paleturquoise;
  border: 3px solid tomato;
}
.fitting-image {
  object-fit: cover;
  height: auto;
  width: 100%;
}
</style>

Visual representation on the devtools grid layout overlay

https://i.sstatic.net/o74cz.jpg

Maintains a consistent 25% width on all screen sizes and offers flexibility in adjusting the spacing between elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My code seems to be malfunctioning

I'm attempting to conceal the chatname div. Once hidden, I want to position the chatid at the bottom, which is why the value 64px is utilized. However, I encountered an error stating The function toggle3(); has not been defined. <div id="chat ...

Displaying an image within a textarea using JS and CSS

Could someone help me create a form with textareas that have small images on them? I want clicking on the image to call a function fx(). Can anyone code this for me using JavaScript/jQuery/CSS? In the image below, clicking on "GO" will call Fx() I attemp ...

Conceal a component using v-if when there is a change in the state

I've been racking my brain for the past couple of days trying to wrap my head around reactivity, but it's just not clicking for me yet. Here's the component in question: <template> <div class="tile-content"> <router-li ...

Utilizing the GET method within a form

I'm currently working on testing a form to ensure that my input values are being submitted correctly. At this point, I haven't set up any server script yet. However, I was hoping that upon clicking submit, I would be able to see my values appende ...

Unable to use the select function in Android 2.2

When I click on the select button in my app, it displays multiple options. This functionality works smoothly on Android 4.1, but on Android 2.2, clicking on the select button does not have any effect and therefore the options cannot be selected. <sec ...

Instantly appearing and disappearing Bootstrap modal popup catches users off guard

I've encountered an issue with my bootstrap popup that displays student results - it opens and closes immediately. In my master page file, I have included the following JS files: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser ...

Choose the right Vue.js component for optimal performance

I have a primary element within which there is a secondary element with vue.js 2.0. The issue arises when the secondary element relies on methods from the primary element. Here's an illustration: Vue.component('primary-element', { tem ...

Exploring Vuex Mutations alongside Airbnb's eslint rules

In my Vuejs project (utilizing Vue-cli), I have integrated Airbnb Eslint which enforces various rules, including no-param-reassign. To manage the state (using Vuex), mutations/actions are essential: Rule Conflict mutations: { increase: (state) => ...

CSS Navigation Bar Fails to Function Properly on Mobile Devices

Check out the plunkr I have created by visiting: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview The menu on this plunkr functions correctly on a desktop or laptop, but it doesn't display properly on a mobile device. I suspect that the issue may ...

Adjust the positioning of a class element

I have an eye icon that changes position when clicked. Initially, it is set to left: 10%;, but if there is a DOM element with the ID login-section, it should be repositioned to left: 50%;. I attempted to use document.getElementsByClassName('fa-eye-sl ...

A few of the input fields I filled out are not getting sent to the PHP script

Currently, I am working on a school project that involves creating a website similar to IMDB. My task is to include comments in our database, but I am facing an issue where two fields (fid and spoiler) are not getting posted to the PHP script handling the ...

What is the process of utilizing an API to retrieve data for charts within a Vuejs framework?

I'm a beginner in Vue.js and I aim to optimize my code by retrieving data from an API instead of hardcoding it. Below is the current code snippet: <template> <canvas id="myChart" width="550" height="300">&l ...

Achieving a layered effect with elements overlapping onto another div

Looking for a way to create a design where the text in id="text-field" overlaps with id="image-field". Need some guidance on how to achieve this effect. Any help is appreciated. <!DOCTYPE html> <html> <body> <div class=" ...

Responsive Material-UI horizontal navigation bar

Hey there! I'm working on developing a UI using Material-UI, and I want to make it so that the menu can be collapsed into a slide-in style menu when accessed on a mobile device. Currently, I'm using tabs which allow for sliding left and right, b ...

Positioning a pair of dropdown menus side by side

Could anyone provide guidance on how to position two select boxes side by side within a table cell, ensuring they are responsive at the same time? Any help would be greatly appreciated. Thank you in advance! ...

The Issue with Non-Functional Links in Nivo Slider

Currently facing an issue with the Nivo Slider as it no longer links to any of the photos in the slider. Initially, I had 14 pictures linked to a post with a full embedded gallery inside. The problem arose when using a "fixed" size for the gallery, which d ...

Add a combination of strings and a specific date to be stored in a MySQL database

Currently, I am in the process of troubleshooting a script designed to create SEO-friendly URLs. The script is almost functional, but my brain feels nearly fried trying to pinpoint why I keep receiving the incorrect value in MySQL. Here are the values use ...

Showing a section of a DIV inside an iframe

I have implemented an HTML object in the following way: <object id="foo" name="foo" type="text/html" data="mypage.aspx"> </object> However, I do not want to display the entire content of mypage.aspx within the HTML object/iframe. In ...

Is the conditional module require within an "If" statement always executed in nuxt.config.js?

Despite the missing file mod.json, the "require" statement is still executed leading to an error. The condition should have prevented it from entering the "if" block: const a = 1; if(a === 2){ const mod = require('./scripts/mod ...

Transforming a Processing (cursor) file into an interactive webpage

I have created a custom cursor using Processing and now I want to incorporate it into my website. Is there a way to convert the cursor into a .java file so that I can include it in my HTML file? ...