我可以通过pickerDate vuetify传递参数吗?

时间:2019-10-14 23:28:25

标签: vue.js datepicker vue-component vuetify.js

我的日期选择器是这样的:

<v-date-picker v-model="date" scrollable :picker-date.sync="pickerDate">

日期选择器处于循环状态

我的脚本像这样:

  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    pickerDate: null,
  }),
  watch: {
    pickerDate (val) {
      console.log(val) 
    },
  },

在每个循环中,都有一个参数ID,我想传递参数ID

我这样尝试:

<v-date-picker v-model="date" scrollable :picker-date.sync="pickerDate(id)">

但是存在错误:

Syntax Error: SyntaxError: Unexpected token

我该如何解决这个问题?

参考:https://vuetifyjs.com/en/components/date-pickers#date-pickers-react-to-displayed-month-year-change

1 个答案:

答案 0 :(得分:1)

您无法在选择器日期中传递参数,但仍可以在Vuetify datepicker update:picker-date事件中传递 当您在日期选择器中更改月份时,如果所选的月份是10月,则它将返回值2019-10。如果您将月份更改为11月,则值将为2019-11,而id是您在迭代中传递的值

      <v-date-picker
        v-model="date"
        class="mt-4"
        @update:picker-date="pickerUpdate($event, id)"
      ></v-date-picker>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    date: '2019-10-15',
    id: 5,
  }),
  methods: {
    pickerUpdate(val, id) {
      // you can read the val --> 2019-10 for october, id what you  are passing
      // when you iterate with multiple date picker, you can set id's 
      // write your async call here
       console.log('from picker update ' + val + '  id: ' + id );
    },
  },
})