Using multiple v-date-pickers on a single page

Question

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.

Answer 1

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() },
  ]
}

}