CODEWITHSUNDEEP
vuejs2vuetify.js
Michel Tchoutang
Michel Tchoutang

Reputation: 59

How to align form components horizontally using Vuetifyjs

I'm learning vuetifyjs vuejs2, and I have difficulties to write a code which does the following through vuetify:

I expect this kind of form on vuetify:

1- a form having its components horizontally

2- these components should only be 3 select boxes, with the submit button

3- having a form which send those selected items to a page

that is where I need your with examples of code on vuetify.

At the end, I should have a form having 3 select boxes filled with their options, with a submit forwarding the result to a vue.

Upvotes: 2

Views: 21798

Answers (2)

SanBen
SanBen

Reputation: 2808

For radio-buttons you can set the row attribute on the radio group like this:

<v-radio-group row v-model="radioValue">
    <v-radio value="0" :label="Value 0"></v-radio>
    <v-radio value="1" :label="Value 1"></v-radio>
    <v-radio value="2" :label="Value 2"></v-radio>
</v-radio-group>

as seen in the documentation here --> https://vuetifyjs.com/en/components/selection-controls#api

Upvotes: 10

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

You can achieve this using the grid layout provided by vuetify

<template>
    <v-layout row wrap >
        <v-flex xs12>
               <v-form v-model="valid" ref="form">
                    <v-layout row wrap>
                        <v-flex xs3 v-for="option in selectOptions" :key="option.text">
                             <v-checkbox :label="option.text" v-model="selected" :value="option.value"></v-checkbox>
                        </v-flex> 
                        <v-flex xs3>
                             <v-btn small class="primary">save</v-btn>
                        </v-flex>             
                    </v-layout>                    
            </v-form>
            <p>selected options : {{selected}}</p>
        </v-flex>
    </v-layout>
</template>

<script>
    export default{
        data(){
            return {
                valid: false,
                selected:[],
                selectOptions:[
                    {text: 'Apples', value: 'apple'},
                    {text: 'Oranges', value: 'orange'},
                    {text: 'Grapes', value: 'grape'}
                ]
            }
        },
        }
    }
</script>

Here is the working fiddle

Upvotes: 1

Related Questions