在 Vuetify 中不工作时，时间不会填充动态时间选择器

Question

我试图通过遍历对象数组来动态调用时间选择器，但它选择的是时间而不是更新对象中的值，而日期选择器工作得很好。这是代码片段。请给我任何建议如何让时间选择器与日期选择器一样工作？

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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.10/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.10/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>

你可以查看这个代码笔Here

Answer 1

尝试删除除 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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.10/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.10/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>

在 Vuetify 中不工作时，时间不会填充动态时间选择器

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

vue.js

vuetify.js