Как я могу несколько модальных DatePicker в Vuetify? - PullRequest
Новая
       51

Как я могу несколько модальных DatePicker в Vuetify?

1 голос
/ 09 октября 2019

Мой компонент vue, такой как: 

<template>
  <v-row>
    <v-col cols="12" sm="6" md="4">
      <v-dialog
        v-for="(item, i) in test" :key="i"
        ref="dialog"
        v-model="modal"
        :return-value.sync="item.date"
        persistent
        width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            v-model="item.date"
            label="Picker in dialog"
            prepend-icon="event"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker v-model="date" scrollable>
          <div class="flex-grow-1"></div>
          <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
          <v-btn text color="primary" @click="$refs.dialog.save(item.date)">OK</v-btn>
        </v-date-picker>
      </v-dialog>
    </v-col>
  </v-row>
</template>

<script>
  export default {
    data: () => ({
      test: [
        { id: 1, date: new Date().toISOString().substr(0, 10) },
        { id: 2, date: new Date().toISOString().substr(0, 10) },
      ],
      modal: false,
    }),
  }
</script>

несколько datetimepicker не работает должным образом

Если я нажимаю кнопку ОК в модальном режиме, появляется ошибка, подобная этой:

[Vue warn]: ошибка в обработчике v-on: «Ошибка типа: _vm. $ Refs.dialog.save не является функцией»

Как решить эту проблему?

1 Ответ

0 голосов
/ 09 октября 2019

Прежде всего, вам нужно вернуть весь объект из диалога, а не только дату. При :return-value.sync="item.date" объекты в test будут иметь только date в качестве единственного свойства. Ваш сборщик дат также имеет неправильную привязку. 

  <v-dialog
    v-for="(item, i) in test" :key="i"
    ref="dialog"
    v-model="modal"
    :return-value.sync="item"
    persistent
    width="290px"
  >
    <template v-slot:activator="{ on }">
      <v-text-field
        v-model="item.date"
        label="Picker in dialog"
        prepend-icon="event"
        readonly
        v-on="on"
      ></v-text-field>
    </template>
    <v-date-picker v-model="item.date" scrollable>
      <div class="flex-grow-1"></div>
      <v-btn text color="primary" @click="modal = false">OK</v-btn>
    </v-date-picker>
  </v-dialog>
...