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

Question

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!!!

Answer 1

您应该使用布局包装flex，然后在flex中使用标签以及按照文档中的v-select： https ： //vuetifyjs.com/en/framework/grid#layout-playground