How can I get date from multiple datepicker on the vuetify?

Question

My script is like this :

<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>

Demo is like this : https://codepen.io/positivethinking639/pen/eYYpVqG

I want to get every date selected and display it

usually use this. $refs.dialogTest.save(....)

But i'm confused to get the date of multiple datepicker

How can I do it?

Duplicate to this one: stackoverflow.com/questions/53507842/… — Renato Manalili
You can read the array: after console.log('test') add console.log(this.foos[0].date); console.log(this.foos[1].date); — Max

Achille Skineur Achille Skineur · Accepted Answer · 2019-10-11T19:32:47

Check this code

<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>

Demo on pen https://codepen.io/skineur/pen/JjjGoEo

How can I get date from multiple datepicker on the vuetify?

1 Answers