Как я могу получить дату от нескольких DatePicker на Vuetify? - PullRequest
Новая
       27

Как я могу получить дату от нескольких DatePicker на Vuetify?

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

Мой сценарий выглядит так: 

<template>
    <v-container>
        <v-dialog
            v-for='foo in foos' :key='foo.id'
            :close-on-content-click="false"
            transition="scale-transition"
            min-width="290px" 
            v-model="modalTest2"
            width="290px"
        >
            <template v-slot:activator="{ on }">
                <v-btn color="success" dark v-on="on">call date {{foo.id}}</v-btn>
            </template>

            <v-date-picker v-model="foo.date">
                <div class="flex-grow-1"></div>
                <v-btn text color="primary" @click="modalTest2 = false">Cancel</v-btn>
                <v-btn text color="primary" @click="saveData2">OK</v-btn>
            </v-date-picker>
        </v-dialog>    
    </v-container>
</template>

<script>
  export default {
    data: () => ({
      foos: [
        { id: 1, date: new Date().toISOString().substr(0, 10) },
        { id: 2, date: new Date().toISOString().substr(0, 10) },
      ],
      modalTest2: false,
    }),
    methods: { 
        saveData2() {
            console.log('test');
            // this.$refs.dialogTest.save(this.foos)
        }
    }
  }
</script>

Демонстрация выглядит следующим образом: https://codepen.io/positivethinking639/pen/eYYpVqG

Я хочу выбрать каждую выбранную дату и отобразить ее

обычно используютэто. $refs.dialogTest.save(....)

Но я запутался, чтобы получить дату множественного выбора даты

Как я могу это сделать?

1 Ответ

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

Проверьте этот код 

<template>
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-dialog
            v-for='foo, k in foos' :key='foo.id'
            :close-on-content-click="false"
            transition="scale-transition"
            :return-value.sync="foo.date"
            min-width="290px" 
            v-model="modal[k]"
            width="290px"
            :ref="'dialog' + k"
        >
            <template v-slot:activator="{ on }">
                <v-btn color="success" dark v-on="on">call date {{foo.id}} {{ foo.date }}</v-btn>
            </template>

            <v-date-picker v-model="foo.date">
                <div class="flex-grow-1"></div>
                <v-btn text color="primary" @click="modal[k] = false">Cancel</v-btn>
                <v-btn text color="primary" @click="$refs['dialog' + k][0].save(foo.date)">OK</v-btn>
            </v-date-picker>
        </v-dialog>    
      </v-container>
    </v-content>
  </v-app>
</div>
</template>

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
      foos: [
        { id: 1, date: new Date().toISOString().substr(0, 10) },
        { id: 2, date: new Date().toISOString().substr(0, 10) },
      ],
      modal: [
        false,
        false
      ],
    }),
    methods: { 
        save(k) {
            console.log(this.$refs['dialog' + k][0]);
        }
    }
})
</script>

Демонстрация на ручке https://codepen.io/skineur/pen/JjjGoEo

...