show form as dropdown to button (vuetify)

244
July 26, 2019, at 06:40 AM

I have a v-btn.

When clicked on it, I want to have a dropdown to it. I don't want the dropdown to be a list, but the form with 3 labels and 3 text fields. Each label for each textfield.

Problem 1) When showing labels and textfields, they are all at the same line(horizontally). how do I make label and textfield below it?

Problem 2) WHen that dropdown appears and I put mouse on textfield, dropdown completely closes. I only want to close it when i click the button which also resides on that dropdown at the end of the form. how do I not close it when clicked on it ?

P.S. I am using v-menu for dropdown.

Answer 1

1) Vuetify text fields have a prop named "label" - if you bind the label text to this prop it'll automatically appear above the text field. Otherwise, if you for some reason want to create your own label, just wrap both the label and input in a v-layout OR wrap the label and input in the same element (e.g. div) and make sure the label is a div

          <v-flex xs12 sm6>
            <div>test label</div>
            <v-text-field
              v-model="title"
              :rules="rules"
              counter="25"
              label="Outline"
              outline
            ></v-text-field>
          </v-flex>

2) the menu has a "close-on-content-click" prop that defaults to true, which you can set to false. This will prevent the menu from closing on click

Answer 2

Problem 1
Can you please provide a small example of your code?
In Vuetify you can just use a v-text-field and give it a label via the label prop.

Problem 2
You can set close-on-click and close-on-content-click to false to prevent the dropdown from closing.

Small example:

new Vue({ 
  el: "#app", 
  vuetify: new Vuetify(), 
  data() { 
    return { 
      menuOpen: false, 
      firstname: "", 
      lastname: "" 
    }; 
  }, 
  methods: { 
    save() { 
      alert(`Your name is ${this.firstname} ${this.lastname}!`); 
      this.menuOpen = false; 
    } 
  } 
});
#app { height: 400px; }
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> 
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" rel="stylesheet"> 
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> 
 
<div id="app"> 
  <v-app> 
    <v-content> 
      <v-menu offset-y :close-on-click="false" :close-on-content-click="false" v-model="menuOpen"> 
        <template v-slot:activator="{ on }"> 
          <v-btn v-on="on" class="ma-4">BUTTON</v-btn> 
        </template> 
        <v-card> 
          <v-card-text> 
            <v-text-field label="First Name" v-model="firstname"></v-text-field> 
            <v-text-field label="Last Name" v-model="lastname"></v-text-field> 
          </v-card-text> 
          <v-card-actions> 
            <v-spacer></v-spacer> 
            <v-btn color="grey darken-2" @click="menuOpen = false" dark>CANCEL</v-btn> 
            <v-btn color="primary" @click="save">OK</v-btn> 
          </v-card-actions> 
        </v-card> 
      </v-menu> 
    </v-content> 
  </v-app> 
</div>

Rent Charter Buses Company
READ ALSO
Array of objects sort works on way on Chrome and the other on Firefox with javascript

Array of objects sort works on way on Chrome and the other on Firefox with javascript

I have a necessity to order an array of objects using another list order, but here's the catch the strings on the list only fulfill partially a particular attribute from the object

131
Webpack compression fails on spread operator in objects on CircleCI

Webpack compression fails on spread operator in objects on CircleCI

I compressed my bundle and was able to serve up webpack-bundledjs

402