Show automatically created forms alongside each other within a v-for loop

When generating dynamic forms from a json file, the forms end up being displayed one on top of the other like this:

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

However, I want them to be displayed like this (for example, if there are 3 inputs, the fourth one should be next to the third one and so on):

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

<div v-for="(item, index) in json" :key="index">
  <b-form-input v-if="item.type" :type="item.type"></b-form-input>
</div>

The object structure is as follows:

[
    {
        "key": "key1",
        "label": "Input Type Text",
        "type": "text",
        "value": ""
    },
    {
        "key": "key2",
        "label": "Input Type Number",
        "type": "number",
        "value": ""
    },
    {
        "key": "key3",
        "label": "Input Type Number",
        "type": "number",
        "value": ""
    }
]

I attempted to use class="row" to solve the issue, but it didn't work as expected since the forms still stack on top of each other.

javascriptvue.jsvuejs2bootstrap-vue

Answer №1

Can I set only the class "col-6" for my input fields, while keeping "col-12" for my select and checkboxes?

There are two ways to approach this based on your requirements

Firstly, if you have the flexibility to modify your input object, you could follow this method:

Approach 1

Add specific classes to your object

[
    {
        "key": "key1",
        "label": "Input Type Text",
        "type": "text",
        "value": "",
        "classes": "col-6"
    },
    {
        "key": "key2",
        "label": "Input Type Number",
        "type": "number",
        "value": "",
        "classes": "col-6"
    },
    {
        "key": "key3",
        "label": "Input Type Number",
        "type": "number",
        "value": "",
        "classes": "col-6 another-class"
    }
]

Then utilize these classes in your HTML structure

<div class="row">
  <div
    v-for="(item, index) in json"
    :key="index"
    :class="item.classes"
   >
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </div>
</div>

Approach 2

Assign classes based on input type conditions

<div class="row">
  <div
    v-for="(item, index) in json"
    :key="index"
    :class="{
      'col-6': item.type === 'number' || item.type === 'text' || item.type === 'email',
      'col-12': item.type === 'select' || item.type === 'checkbox',
    }"
   >
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </div>
</div>

response inspired by s4k1b

Answer №2

Based on the tags provided, it seems like you are utilizing bootstrap framework

With bootstrap, you have the option to utilize row and col classes to arrange elements horizontally in a row.

<div class="row">
  <div v-for="(item, index) in json" :key="index" class="col-6">
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </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

Step-by-step Guide on Installing VueJs Medium Editor

After spending countless hours trying to install Medium Editor in VueJs, I finally got it working on a single page vuejs. However, I hit a roadblock when trying to make it work with the webpack file structure: ├── main.js # app en ...

javascriptnode.jsvue.jsvuejs2medium-editor

jQuery menu animation not triggering until second click

I am currently working on implementing a menu that will slide in after clicking the hamburger button (located in the upper right corner). Instead of simply appearing, I wanted to use a jQuery function for a smoother sliding effect. However, I seem to be e ...

javascriptjqueryanimationtoggle

Add a photo - Django REST framework

I have two models, User and EcoUser, with a one-to-one relationship (I have omitted some fields for simplicity in this example): class User(AbstractUser): picture_url = models.ImageField(upload_to='logos/', blank=True) class EcoUser(models. ...

javascriptdjangodjango-modelsvue.jsdjango-rest-framework

Exploring Vue.js: Navigating Through an Array of Images Nested Within Another Array

I am looking to showcase images stored in an array called "image" within another array named product. Essentially, if a product has an array of 3 images, I want to display all 3 images, and so on. Here is the code snippet: <template> <div c ...

javascriptarraysvue.js

I am implementing a new method in the prototype string, but I am uncertain about its purpose

I am trying to wrap my head around the concept here. It seems like the phrase will pass a part of an array, in this case eve, to the phrase.palindrome method. This method will then process it. First, the var len takes the length of eve and subtracts 1 from ...

javascriptarraysfor-loopprototypecharat

Encountered a SyntaxError while deploying Nuxt.js SSR on Passenger: The import statement cannot be used outside a module

I am currently in the process of deploying my Nuxt app on a hosting service that uses Passenger to run Node.js applications. After building the app with the command ">npm run build" and deploying the content from the .nuxt folder onto the server, specif ...

node.jsvue.jsdeploymentnuxt.jspassenger

Tips for utilizing the useContext hook in Next.js

I'm facing an issue with persisting information between different pages using nextjs and the useContext hook. Despite changing a variable in one page, it reverts back to its default value when navigating to another page. Below is a glimpse of the dir ...

javascriptreactjsnext.jsreact-context

Encountering a NoSuchElementException when transitioning from frame[0] to window[1] in Firefox GeckoDriver using Selenium with Python

Encountered an issue with the Firefox GeckoDriver browser where I receive an error stating `element not found`. The problem arises when I navigate from window[1] to frame[0], back to window[1], and then attempt to click the close frame button. I prefer u ...

javascriptpythonseleniumgeckodriverfirefox-marionette

The "maxlength" attribute does not function with the input type "number" in an HTML textbox

The maxlength attribute does not seem to be functioning properly when using type="number" ...

javascripthtml

Displaying a webpage exclusively based on the user's origin from a particular page or link

Is there a way to restrict access to a web page so that it is only visible to users who come from a specific page or link? If the page's link is accessed directly from the browser or from any other source aside from the specified page or link, would i ...

javascriptphpjqueryhttp-redirect

Trouble displaying data table using Vue JS (v-for)

My goal is to display a table of data fetched from Firebase Firestore. I have successfully stored all the data in an array, but when I try to display it, the entire array appears instead of individual items. You can see the issue in the image below: Here& ...

firebasevue.jscomponentsvuetify.js

Tips for Managing the Hardware Back Button in Ionic 3

Can someone help me enable the hardware back button in Ionic 3? I want it to redirect to specific pages and display designated content. Being new to Ionic 3, I need guidance on how to set up the hardware device buttons for redirection. ...

javascriptandroidiosangularionic-framework

Jquery feature to automatically hide the submit button

Is there a way to automatically hide the submit button and display a message without requiring a mouse click? If the main balance is less than the inputted withdrawal amount, I want the submit button to be hidden automatically and a message stating insuff ...

javascriptphpjqueryajaxlaravel

Can you help me make a JavaScript Random Number Generator that utilizes HTML input fields and buttons?

I am currently working on developing a random number generator that takes user input through HTML. The idea is to have the user enter two values and then click "submit" to receive a random number within that range. However, I seem to be stuck at this poin ...

javascriptfunctiondomrandomgetelementsbyclassname

What are some strategies for receiving multiple responses with just one ajax request?

. I am having trouble grasping the concept of using ajax and how to get multiple responses while passing a single request. Can anyone provide me with a sample code to help me understand better? ...

javascriptajax

Ways to remove items from Vuex store by utilizing a dynamic path as payload for a mutation

I am looking to implement a mutation in Vuex that dynamically updates the state by specifying a path to the object from which I want to remove an element, along with the key of the element. Triggering the action deleteOption(path, key) { this.$store.d ...

javascriptvue.jsvuexvue-reactivity

Disabling a button following a POST request

Is there a way to prevent multiple clicks on a button after a post request is made? I want the button to be disabled as soon as it is clicked, before the post request is executed. Below is an example of my code where the button is supposed to be disabled w ...

javascriptjquery

Firebase Auth in Vue.js is having trouble accurately verifying error messages when resetting passwords

As I work on sending a password reset email to a user, Firebase throws an error called RESET_PASSWORD_EXCEED_LIMIT when the number of requests goes beyond a certain limit. I am attempting to capture this error message in order to notify the user that thei ...

firebasevue.jsfirebase-authentication

Is <form> tag causing code deletion after an ajax request?

I'm working on a form that looks like this: <form> <input class="form-control" id="searchField" type="text"> <button type="submit" id="searchUserButton">SEARCH BUTTON</button> </form> When I click on SEARCH BUT ...

javascriptjqueryhtmlajax

Experiencing a strange response while attempting to parse the result of an Angular 2 HTTP JSON request

After successfully implementing the http.get call and retrieving data from the request, I encountered an issue: this.http.get('https://data.cityofnewyork.us/resource/xx67-kt59.json').subscribe(data => { // Read the result field from the ...

javascriptjsonangularangular-http