How can I organize a list into multiple columns using VueJs?

Is there a way to have data flow into the next column after reaching a certain width and height, without creating a new Array? Here is a demo.

new Vue({
  el: '#app',
  data() {
    return {
      lists: [{
          text: 'Item1'
        },
        {
          text: 'Item2'
        },
        {
          text: 'Item3'
        },
        {
          text: 'Item4'
        },
        {
          text: 'Item5'
        },
        {
          text: 'Item6'
        },
        {
          text: 'Item7'
        },
        {
          text: 'Item8'
        },
        {
          text: 'Item9'
        },
      ]
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65131000110c031c25544b504b5451">[email protected]</a>/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f5f6e6f7eae5fac3b2adb6adb2b7">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-layout class="mt-3 ml-4">
      <v-flex md-4>
        <div v-for="list in lists" :key="list.text">
          {{list.text}}
        </div>
      </v-flex>
      <v-flex md4>
        //How can data be made to flow into this column after certain dimensions?
      </v-flex>
    </v-layout>
  </v-app>
</div>

I am looking for a solution that involves adjusting widths and heights rather than creating a new Array to avoid manual adjustments throughout the code.

Answer №1

To easily create columns using CSS, you can utilize a v-for to display the content on the screen and then apply CSS styling. This method involves appending multiple <div> elements within a loop. Below is an example showcasing CSS columns.

This straightforward solution employs column-count: 3, which divides the list into three equal columns.

.column_wrapper {
  column-count: 3;
}
<div class="column_wrapper">
  <!-- results of <div v-for="item in list"></div> -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>

  <!-- Continuing with more items -->
</div>

An alternative approach utilizing flex-box allows for defining specific height constraints for column breaks. For instance, if the list exceeds 200px in height:

.column_wrapper {
    max-height: 200px;
    display: flex;
    flex-flow: column wrap;
}
<div class="column_wrapper">
  <!-- results of <div v-for="item in list"></div> -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>

  <!-- Continuing with more items -->
</div>

Note: In both examples, it's important to recognize that the browser determines where to split the columns rather than allowing explicit control over the break points. If specific control is needed, creating separate arrays for each column within Vue.js is recommended.

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

"Implementing v-model within a v-for loop in Vue.js: A step-by-step guide

Hello there, I need some assistance with a coding issue that I am facing. I am currently working on developing a post/comment/reply system similar to Facebook using vuejs. I have implemented v-for to loop through all the posts/comments/replies after fetch ...

React erroneously encodes quotation marks within attribute names

Currently, I am working on a Next.js / (SSR React) application. I am passing a property through props to a meta component. The specific tag where the string is inserted looks like this: <meta property="og:description" content={ `${description}` } /& ...

Embedding links in v-bind:href

I inserted a dynamic link inside the <header></header> section using the method mentioned here: Vue JS and appending a variable to end of a URL Below are the relevant codes: <tr class="notice-row" v-for="(myCase, id) in case ...

Using Vue.js to inject plain text into a Vue component from HTML

I am currently in the process of transitioning code from ASPX to VUE.JS. In the previous system, there was a feature that allowed plain text to be injected into HTML (such as messages with text, images, links, and inputs). However, in VUE, the injected HT ...

By simply clicking a button, you can input a value into a field without the need for the page to refresh

Can someone please help me figure out how to insert a specific value into an input field without refreshing the page? I have tried the following code but it doesn't seem to work. Basically, when I click the button, I want the value "1234567" to be aut ...

I'm having trouble getting the gutter padding to show up in one specific content block on my Bootstrap webpage. How can I troubleshoot and resolve this

Currently, I am delving into the realm of Bootstrap 5 and have recently put together a simplistic webpage using the row/column structure suggested by Bootstrap. However, while my other columns seem to be cooperating and displaying the gutter padding as exp ...

Exploring server-side code debugging in Next.js using Chrome DevTools can sometimes pose challenges. Breakpoints may be overlooked and console output might not be properly displayed in Chrome

Currently, I am following a specific guide for debugging purposes. Check out the guide here In my case, I am attempting to utilize the Chrome debugger to diagnose issues within the server aspect of a Next.js application, excluding the use of VS Code. Af ...

Use jQuery Flipclock to display duplicate print text within an interval function

I am currently utilizing jQuery Flipclock The functionality is good so far. However, I have a button to modify the time. When clicked, the time should change to 10 seconds and display the new value in the span tag. But for some reason, the old counting va ...

Implementing context menus on the Material-UI DataGrid is a straightforward process that can enhance the user experience

I am looking to enhance my context menus to be more like what is demonstrated here: Currently, I have only been able to achieve something similar to this example: https://codesandbox.io/s/xenodochial-snow-pz1fr?file=/src/DataGridTest.tsx The contextmenu ...

Enabling CORs headers in Express continues to lead to errors

I have implemented the CORS code provided on http://enable-cors.org/ for express into my index.js file. /*these first five line direct from http://enable-cors.org/.com*/ app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); ...

JavaScript function to add or subtract

I need to include additional inputs for "+ and -" 60mm and 120mm in my function. How can I achieve this without turning all of them into separate functions? <template> <card class="card"> <h2>Measurement</h2> <form&g ...

Using jQuery to extract contact information from Google: A step-by-step guide

I'm currently using Google's API to access my contact list information and after logging the output in the console function fetch(token) { $.ajax({ url: "https://www.google.com/m8/feeds/contacts/default/full?access_token=" + token. ...

What is the process for adding elements to an array, then sorting it in JavaScript and returning the sorted array

Having an issue with my code snippet below, My goal is to insert a new record at the beginning of the array and then sort it based on the label. However, I'm encountering an unexpected outcome where the array turns out empty. const array = [{id: &apos ...

Organizing a specific group of graph nodes in a unique layout with cytoscape.js

When working with Cytoscape JS, one can take advantage of the intriguing feature known as LAYOUTS. My goal is to organize a group of nodes in a circular layout. However, I do not wish for all the nodes in my network graph to be placed on that circle. Is t ...

Navigating the process of transferring a function to a functional component within React

Hey there, I'm fairly new to using React and TypeScript and I am facing a small issue with moving a function from the file App.tsx to a functional component called WordAddingForm.tsx. Any help would be greatly appreciated! Let's start with my Ap ...

Passport verification is successful during the login process, however, it encounters issues during registration

I am currently learning about passport.js and session management, and I'm in the process of implementing a local login feature on my website. Here is what I am attempting to achieve: Secret page: Authenticated users can access the secret page, while ...

Execute function upon completion of scroll animation twice

Twice, the complete handler is triggered by this scroll animation... $('html,body').stop().animate({ scrollTop : 100 }, { duration : 600, complete : function(){ console.log('scroll complete'); } }); If you elim ...

Tips for utilizing the "g" element in SVG within CoffeeScript to rotate an object in D3

I'm experimenting with creating a design similar to the following SVG code snippet: <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example rect02 - rounded rectangles&l ...

Is there a way to efficiently update multiple rows at once in MySQL using an array in Node.js?

I am attempting to use the UPDATE function to modify three different columns in my table named "stores." Specifically, I want to add "openingTime," "closingTime," and "phoneNumber" values and associate them with a storeId that already exists in the table. ...

Retrieving an assortment of objects from a database and showcasing them using React

Attempting to retrieve an array of objects led me to this issue. Please excuse the messy code, I am still learning. export class App extends Component { state ={ character:[] } componentDidMount(){ fetch('https://swapi.dev/api/people/ ...