CODEWITHSUNDEEP
formsvue.jsvuetify.js
radiorz
radiorz

Reputation: 1889

how to create form like this by vuetify?

enter image description here

I want to create form like the picture above but i dont know how to do it? and i want to bind the data to parameter'quota'

data(){
 return {
   quota :'',
   defaultquota:'-1'//which is defined as unlimited
 }
}

Upvotes: 0

Views: 320

Answers (1)

mechanicalsheep
mechanicalsheep

Reputation: 252

I think taking a look into the vuetify examples would probably be your best best. What have you tried so far? By looking at your picture, you can see that you will require one v-radio-group which will have 2 v-radio buttons. and a v-text-field that will be bound to your quota variable, result will be something like this:

<form>
    <v-row>
    <v-radio-group label="quota:" row>
        <v-radio label="unlimited"/>
        <v-radio label="input by yourself:"/>
    </v-radio-group>
    <v-text-field outlined  v-model="quota"/>
    </v-row>
</form>

You might want to add a v-model on the v-radio-group in order to figure out which option was chosen and set a default one if needed.

The form is simple, I added a for it to all appear in the same line as the picture. the outlined on the v-text-field will give it that boxy input look that's in the picture. the rest should be self explanatory.

I would strongly suggest looking at what examples and api vuetify has to offer on their main site as the more you look at it the more you will be able to figure out exactly what you need. https://vuetifyjs.com/en/introduction/why-vuetify/#guide

look under the components in the navigation, all the components are listed there along with examples of using them and how they look, it will be very helpful!

Happy coding!

Upvotes: 1

Related Questions