在Vuetify中無法使用動態時間選擇器填充時間

我試圖通過回圈遍歷物件陣列來動態呼叫時間選擇器，但它選擇時間而不是更新物件中的值，而日期選擇器作業得很好。這是代碼的片段。請問有什么建議可以讓時間選擇器與日期選擇器一樣作業嗎？

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>

您可以在此處查看此代碼筆

uj5u.com熱心網友回復：

嘗試洗掉所有除了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>

標籤：Vue.js vuetify.js

上一篇：等待異步forEach

下一篇：如何為空輸入添加適當的類？