如何从 vuetify 上的多个日期选择器获取日期？

Question

我的脚本是这样的：

<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(....)

但我对获取多个日期选择器的日期感到困惑

我该怎么做？

Answer 1

检查此代码

<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