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

Posted 2023-02-22

【中文标题】如何从 vuetify 上的多个日期选择器获取日期？

【英文标题】：How can I get date from multiple datepicker on the vuetify?

【发布时间】：2020-02-08 10:30:58

【问题描述】：

我的脚本是这样的：

<template>
    <v-container>
        <v-dialog
            v-for='foo in foos' :key='foo.id'
            :close-on-content-click="false"
            transition="scale-transition"
            min- 
            v-model="modalTest2"
            
        >
            <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(....)

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

我该怎么做？

【问题讨论】：

复制到这个：***.com/questions/53507842/…

可以读取数组：console.log('test')后面加上console.log(this.foos[0].date); console.log(this.foos[1].date);

【参考方案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- 
            v-model="modal[k]"
            
            :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

【讨论】：

太棒了。但是如果我点击取消按钮，模式不会关闭

现在好了。我将简单的模态数组更改为对象数组

太棒了。非常感谢