CODEWITHSUNDEEP
htmlvue.jsvuejs2pugvuetify.js
user2547656
user2547656

Reputation: 61

VUEJS How to build a paragraph with nested label's and v-select's (vuetify and pug)

I want to build a paragraph with text and options displayed in a drop-down list. I've already done but I'm having problems with the design because it has to be in this way:

Lorem ipsum dolor sit amet, [ DROPDOWN ] consectetur adipiscing elit, [DROPDOWN] sed do eiusmod tempor incididunt ut [DROPDOWN] labore et dolore magna aliqua.

I am using vuetify and a pug template to generate it dynamically because it is a quiz page and I will use this control in many places in my project.

Since in v-flex, there are already certain sizes because of the layout grid system, Is there a way to build a paragraph with nested labels and dropdowns?

I've tried setting values through v-flex, but since I have different sizes in every question of my quiz project that option is not working.

 v-flex(xs10, sm15, md12)
        div.answers(v-for="(element, index) in questions")
            label.label {{element.label}}
            v-select(:items="element.combos" item-text="name" item-value="value" label="Selecciona..." :key="index")

It is already working but I don't know how could I generate the elements to display my components in a nested way.

Please HELP ME!!!

Upvotes: 0

Views: 1238

Answers (1)

Michael
Michael

Reputation: 5048

You should wrap your flex with a layout and then have the label inside a flex as well as the v-select as per docs here: https://vuetifyjs.com/en/framework/grid#layout-playground

Upvotes: 0

Related Questions