Exploring the potential of combining chunk VueJS with the versatile Bootstrap grid system

Below is the code snippet provided:

I have encountered similar issues to this before, but I am having trouble grasping the solution.

The goal is to insert a Bootstrap row after every 2 items in the list.

Vue.component('col-md-6', {
  props: ['data'],

  template: '<div class="col-md-6"><div class="form-group"> <label :for=" data.inid "> {{ data.label }}  </label><input type=""  :disabled="data.dsbl" class="form-control" :id=" data.inid " :placeholder=" data.label "> </div> </div>',
})
var inputgen = new Vue({
  el: "#container",
  data: {
    inputs: [{
        id: 0,
        type: '',
        inid: 'no',
        dsbl: true,
        label: 'Ariza №'
      },
      {
        id: 1,
        type: '',
        inid: 'rw',
        status: "",
        label: 'Asosiy menu'
      },
      {
        id: 2,
        type: '',
        inid: 'wer',
        status: "",
        label: 'Asosiy menu'
      },
      {
        id: 3,
        type: '',
        inid: 'w4er',
        status: "",
        label: 'Asosiy menu'
      },
    ]



  },
  
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="row" id="container" >
  <col-md-6 v-for="item in inputs" v-bind:data="item" v-bind:key="item.id"></col-md-6>
</div>

javascriptbootstrap-4vuejs2vue-component

Answer №1

It seems like you're looking to automatically generate a new <div class="row"> every 2 items. This will help create a simplified structure for your content.

<row>
  <col></col>
  <col></col>
</row>
<row>
  <col></col>
  <col></col>
</row>

To achieve this, you can use a computed property to divide your original array into pairs. There are various methods to do this, but I found success using the approach from the top search result on Google.

Once you have chunked up your array, you'll end up with something similar to this output:

[ [object, object], [object, object] ]


Vue.component('col-md-6', {
  props: ['data'],

  template: '<div class="col-md-6"><div class="form-group"> <label :for=" data.inid "> {{ data.label }}  </label><input type=""  :disabled="data.dsbl" class="form-control" :id=" data.inid " :placeholder=" data.label "> </div> </div>',
})

var inputgen = new Vue({
  el: "#container",
  computed: {
    chunkedInputs() {
      return this.chunkArray(this.inputs, 2)
    }
  },
  methods: {
    chunkArray(myArray, chunk_size){
      var index = 0;
      var arrayLength = myArray.length;
      var tempArray = [];

      for (index = 0; index < arrayLength; index += chunk_size) {
          myChunk = myArray.slice(index, index+chunk_size);
          tempArray.push(myChunk);
      }

      return tempArray;
    }
  },
  data: {
    inputs: [{
        id: 0,
        type: '',
        inid: 'no',
        dsbl: true,
        label: 'Ariza №'
      },
      {
        id: 1,
        type: '',
        inid: 'rw',
        status: "",
        label: 'Asosiy menu'
      },
      {
        id: 2,
        type: '',
        inid: 'wer',
        status: "",
        label: 'Asosiy menu'
      },
      {
        id: 3,
        type: '',
        inid: 'w4er',
        status: "",
        label: 'Asosiy menu'
      },
    ]
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="container">
  <div class="row" v-for="chunk in chunkedInputs">
    <col-md-6 v-for="item in chunk" v-bind:data="item" v-bind:key="item.id"></col-md-6>
  </div>
</div>

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

Utilize a Vue.js filter on the v-model within an input element

Seeking assistance! I successfully created a directive that wraps the Jasny Bootstrap Plugin, specifically focusing on the input mask feature! Additionally, I have developed a custom filter using moment to format date fields! The date format received fro ...

javascriptjquerydatemomentjsvue.js

Trouble retrieving data (React-redux)

Greetings! I am currently working on a project involving the Spotify API and attempting to retrieve new releases. While the data is successfully passed down to the reducer, I encounter an issue when calling the fetch action in my App component. When I try ...

javascriptreactjsreduxreact-redux

What is the process for creating an Account SAS token for Azure Storage?

My goal is to have access to all containers and blobs in storage. The Account SAS token will be generated server-side within my Node.js code, and the client will obtain it by calling the API I created. While Azure Shell allows manual creation of a SAS toke ...

javascriptnode.jsazureazure-storage

Transmitting HTML content via JSON with AJAX

Currently, I am integrating with the Mercado Livre API. Due to the fact that users can input HTML in the description field, it is necessary for me to accommodate this feature. My approach involves utilizing AJAX to interact with Mercado Livre. However, I ...

javascriptphpajaxjson

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...

javascripthtmlcss

What could be causing me to see a basic checkbox instead of a toggle switch in my React application?

I've been attempting to create a toggle switch that activates dark mode using Bootstrap switches, but when I save the code, it reverts back to a basic checkbox. According to the documentation, for older assistive technologies, these switch elements wi ...

javascripthtmlreactjsbootstrap-4frontend

What steps should I take to host my Vue js single page application on my Django server?

At present, I am in the process of following a tutorial to integrate my Vue.js frontend with my Django backend. You can find the guide here: https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c ...

javascriptpythondjangovue.jsvue-cli-3

How can I make a Vue component close when clicking outside of it?

I am searching for a solution to automatically close a component when there is a click outside of the element. I attempted to use an addEventListener for this purpose. Although it successfully closes the component, it encounters an issue where it fails to ...

javascriptvue.js

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

I am currently working on customizing the appearance of a JavaScript date counter. My goal is to style the days, hours, minutes, and seconds individually. Ideally, I want each unit to be right-aligned within its own div, with specific left and top absolute ...

javascripthtmlcss

Looking to tally a value every time a checkbox is checked within the onchange function

Hey everyone, I'm working on adding a priority number when a checkbox is checked using the onchange function. When a checkbox is checked, it should be marked as 1. I have a list of checkboxes within a div, and when one checkbox is checked, it should b ...

javascriptjquerycheckbox

The state is not being configured accurately

In my ReactJs project, I have a model Component with a picture that is displayed. I want to pass the data of the clicked picture, which can be neither raw data nor a URL. I have implemented a handler that can delete the picture (if pressed with the Ctrl k ...

javascriptreactjs

AngularJS directive with a private scope

I am currently working on a directive and controller setup, which I have mostly learned from the Angular JS Directives PacktPub book. angular.module('myApp',[]) .directive('myIsolatedScopedDirective', function(){ return { s ...

javascriptangularjs

Creating a multi-slide carousel in Bootstrap4 using Django

I am currently working on creating a versatile multi-slide carousel using Django and Bootstrap. Referencing the guidelines provided in this resource, I have developed the following code. However, there seems to be an issue with the HTML, as the data retri ...

pythonhtmlcssdjangobootstrap-4

Ways to successfully transfer an array containing numerous mesh entities

One task I need to accomplish is parsing an array that was created in a web worker back to the main thread. This particular array contains a large number of THREE.Mesh objects. However, when attempting to stringify this array using the following code: sel ...

javascriptarraysthree.jsmesh

The size of the Webpack bundle grows with each subsequent build

For my project, I am utilizing webpack to package it as a library. The project consists of a components library, and for each component residing in its own directory under src/ui, I am creating small bundles. Here is an example component structure: src/ ...

javascriptreactjswebpacksass

Is there a seamless way to effortlessly upload massive files to s3 through an adminjs dashboard without encountering any glitches?

Attempting to upload large files (40mbs+) to s3 using the @adminjs\upload feature on the adminJS dashboard. While testing locally, most files are successfully uploaded but it takes a considerable amount of time. However, when attempting this on the AW ...

javascriptnode.jsamazon-s3adminjs

Preventing the backspace or delete key from deleting text before the cursor

I need to prevent the cursor from deleting the word before it if the word before is "Hi Harry" in an input type text field. I want to restrict the deletion of text, so that when the user attempts to delete text and the text before it is "Hi Harry," the del ...

javascriptjquery

Leveraging the socket.io and express modules independently of npm

I am currently developing a project for an embedded Linux system using busybox created with buildroot. I'm intrigued by the idea of utilizing node.js modules such as socket.io and express without needing to depend on the installation or execution of n ...

javascriptlinuxnode.jssocket.ionpm

Is your Node.js HTTP Request failing to function properly?

I am currently working on creating an HTTP Request function where all requests are directed to the same domain but with different file names. Unfortunately, I am encountering a problem where nothing is being displayed in the console and no data is being r ...

javascriptnode.js

Execute button click automatically upon page loading in AngularJS

I'm trying to figure out how to automatically trigger a button click on an AngularJS page when the page loads based on a querystring value. In a traditional asp.net web forms page, I could easily handle this scenario by calling Button1_Click(sender,e) ...

javascripthtmlangularjsbuttonclick