CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
06011991
06011991

Reputation: 807

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

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

Upvotes: 0

Views: 463

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

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>

Upvotes: 1

Related Questions