Home » vue » Time is not populating with dynamic time picker in not working in Vuetify

Time is not populating with dynamic time picker in not working in Vuetify

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m trying to call the time picker dynamic by looping through the array of objects but it’s selecting the time and not updating the value in objects whereas the date picker works perfectly fine. Here is the snippet of the code. Any suggestions please how can I make the time picker work the same as date picker?

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      dateMenu: [],
      timeMenu: [],
      dateArr: [{
          id: 1,
          date: null
        },
        {
          id: 2,
          date: null
        }
      ],
      timeArr: [{
          id: 1,
          time: null
        },
        {
          id: 2,
          time: null
        }
      ]
    };
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-row>

      <template v-for="item in timeArr">
        <v-col cols="12" md="3">
          <v-menu ref="timeMenu[item.id]" v-model="timeMenu[item.id]" :close-on-content-click="false" :return-value.sync="item.time" transition="scale-transition" offset-y max-width="290px" min-width="290px">
            <template v-slot:activator="{ on, attrs }">
              <v-text-field outlined flat hide-details="auto" solo class="solo-cust" v-model="item.time" label="From" readonly v-bind="attrs" v-on="on"></v-text-field>
            </template>
      <v-time-picker no-title ampm-in-title format="24hr" v-model="item.time" full-width @click:minute="$refs.timeMenu[item.id].save(item.time)"></v-time-picker>
      </v-menu>
      </v-col>
      </template>
    </v-row>
    {{timeArr}}
    <v-row>

      <template v-for="item in dateArr">
        <v-col cols="12" md="3">
          <v-menu v-model="dateMenu[item.id]" :close-on-content-click="false" transition="scale-transition" offset-y max-width="290px" min-width="290px">
            <template v-slot:activator="{ on }">
              <v-text-field autocomplete="off" label="Date" v-model="item.date" solo outlined v-on="on" flat hide-details="auto"></v-text-field>
            </template>
      <v-date-picker v-model="item.date" no-title @input="dateMenu[item.id] = false;"></v-date-picker>
      </v-menu>
      </v-col>
      </template>
    </v-row>
    {{dateArr}}
  </v-app>
</div>

You can check this codepen Here

Answers:

Try to remove all except v-model:

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      dateMenu: [],
      timeMenu: [],
      dateArr: [{
          id: 1,
          date: null
        },
        {
          id: 2,
          date: null
        }
      ],
      timeArr: [{
          id: 1,
          time: null
        },
        {
          id: 2,
          time: null
        }
      ]
    };
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-row>

      <template v-for="item in timeArr">
        <v-col cols="12" md="3">
          <v-menu v-model="timeMenu[item.id]" :close-on-content-click="false"  transition="scale-transition" offset-y max-width="290px" min-width="290px">
            <template v-slot:activator="{ on, attrs }">
              <v-text-field outlined flat hide-details="auto" solo class="solo-cust" v-model="item.time" label="From" readonly v-bind="attrs" v-on="on"></v-text-field>
            </template>
      <v-time-picker no-title ampm-in-title format="24hr" v-model="item.time" full-width ></v-time-picker>
      </v-menu>
      </v-col>
      </template>
    </v-row>
    {{timeArr}}
    <v-row>

      <template v-for="item in dateArr">
        <v-col cols="12" md="3">
          <v-menu v-model="dateMenu[item.id]" :close-on-content-click="false" transition="scale-transition" offset-y max-width="290px" min-width="290px">
            <template v-slot:activator="{ on }">
              <v-text-field autocomplete="off" label="Date" v-model="item.date" solo outlined v-on="on" flat hide-details="auto"></v-text-field>
            </template>
      <v-date-picker v-model="item.date" no-title @input="dateMenu[item.id] = false;"></v-date-picker>
      </v-menu>
      </v-col>
      </template>
    </v-row>
    {{dateArr}}
  </v-app>
</div>