Using multiple v-date-pickers on a single page

问题

All:

I'm trying to add multiple Vuetify date pickers to a single page. I'm using it within a v-menu so that when a date is selected it is shown in a text field.

The issue I'm having is: when I select a date for the first date field everything works as expected but when I click to select the second date it is populating the first date field again. I have the following:

<div v-for='foo in foos' :key='foo.id'>
    <v-menu
        :close-on-content-click="false"
        v-model="menu"
        :nudge-right="40"
        lazy
        transition="scale-transition"
        offset-y
        full-width
        min-width="290px" >
        <v-text-field        
            slot="activator"
            v-model="foo.date"
            label="Date"
            prepend-icon="event"
            readonly>
        </v-text-field>
        <v-date-picker v-model="foo.date" @input="menu = false">.    
        </v-date-picker>
    </v-menu>
</div>

But it doesn't seem to be respecting that foo is different in each iteration of the loop so it is only updating the first instance of foo.date instead of the current foo.date.

Any advice on how to get this working would be great.

回答1:

With @thanksd's help I was able to figure out what the issue was.

The issue is that I was using the menu property for all of my date pickers which meant whenever I clicked on a date input all of the menus were opening. I didn't recognize this, though, because of a CSS issue where only the first date picker was visible on the screen when I clicked a date input.

With only one date picker showing I was using only the visible date picker which was bound to the first input. If I had seen the multiple date pickers I would have noticed that if I used one of the other date pickers a different date input would have been modified.

So thanks, @thanksd!

回答2:

The solution provided by @Billy Monk is good but not enough as it restricts you to use v-model for stuff like closing date-picker when a date is selected. You can try something like this:

HTML:

<div v-for='foo in foos' :key='foo.id'>
  <v-menu
      v-model="menu[foos.indexOf(foo)]"
      :close-on-content-click="false"
      :nudge-right="40"
      lazy
      transition="scale-transition"
      offset-y
      full-width
      max-width="290px"
      min-width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="foo.date"
          label="Date"
          hint="MM/DD/YYYY format"
          persistent-hint
          prepend-icon="event"
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker v-model="foo.date" no-title @input="menu[foos.indexOf(foo)] = false"></v-date-picker>
    </v-menu>
</div>

Javascript

data() {
return {
menu: [],
  foos: [
    { id: 1, date: new Date() },
    { id: 2, date: new Date() },
  ]
}

}

来源：https://stackoverflow.com/questions/53507842/using-multiple-v-date-pickers-on-a-single-page

标签

vuetify.js