Vuetify: [Bug Report] Datepicker items crash browser if nested inside v-for loop

[jacobebell]

Versions and Environment

Vuetify: 1.0.4
Vue: 2.5.13
Browsers: Chrome 64.0.3282.186
OS: Mac OS 10.13.3

Steps to reproduce

Add any v-for loop
place a menu or dialog date picker inside

• for my example I have just looped once - but on my use case - I am building a form and checking if the question type is date-picker, then set appropriate v-models, etc.
• the dialog and menu open, but fail to save - if you click save - it goes to a 404 page and crashes
• I have tried this loop in various tags v-flex, div, v-layout, v-card, etc. crashes on all

Expected Behavior

I would like the datepicker to work inside of a v-for - like all of the other inputs.

Actual Behavior

Does not function properly inside v-for loop

Reproduction Link

https://codepen.io/anon/pen/aqrBoq

[KaelWD]

From Vue docs:

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

You need to use @click="$refs.dialog[index - 1].save(date)" instead.
The dialog model should also be an array so they don't all open at once.

[jagzao]

Your my idol

[BenyErnest]

From Vue docs:

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

You need to use @click="$refs.dialog[index - 1].save(date)" instead.
The dialog model should also be an array so they don't all open at once.

There is no need to subtract 1

<v-list-tile v-for="(item, index) in data" :key="index">
            <v-flex xs2>
              <v-menu
                ref="dates"
                v-model="item.menu"
                :close-on-content-click="false"
                :nudge-right="40"
                :return-value.sync="item.date"
                lazy
                transition="scale-transition"
                offset-y
                full-width
                min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                    v-model="item.date"
                    label="Picker in menu"
                    prepend-icon="event"
                    readonly
                    v-on="on"
                  ></v-text-field>
                </template>
                <v-date-picker v-model="item.date" no-title scrollable>
                  <v-spacer></v-spacer>
                  <v-btn flat color="primary" @click="item.menu = false">Cancel</v-btn>
                  <v-btn flat color="primary" @click="$refs.dates[index].save(item.date)">OK</v-btn>
                </v-date-picker>
              </v-menu>
            </v-flex>
          </v-list-tile>