Vuetify动态渲染的time picker选中后值不更新如何解决

问题根源 #

1. Vue2无法监听数组直接通过下标赋值的变化，你单独定义的timeMenu、dateMenu数组，动态绑定timeMenu[item.id]时不会触发响应式更新，导致时间选择器的状态同步异常。
2. 你给v-menu动态绑定ref="timeMenu[item.id]"的写法在Vue2中不生效，无法正确获取对应菜单实例调用save方法，导致选中的时间没有同步到数组对象中。

修复方案 #

直接把菜单的显隐状态存在对应数组的每个对象项里，同时简化时间选择器的关闭逻辑，和日期选择器保持一致即可：

修改后的JS代码 #

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      dateArr: [{
          id: 1,
          date: null,
          showMenu: false
        },
        {
          id: 2,
          date: null,
          showMenu: false
        }
      ],
      timeArr: [{
          id: 1,
          time: null,
          showMenu: false
        },
        {
          id: 2,
          time: null,
          showMenu: false
        }
      ]
    };
  }
});

修改后的HTML代码 #

<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 :key="item.id" cols="12" md="3">
          <v-menu v-model="item.showMenu" :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 @input="item.showMenu = false"></v-time-picker>
          </v-menu>
        </v-col>
      </template>
    </v-row>
    {{timeArr}}
    <v-row>
      <template v-for="item in dateArr">
        <v-col :key="item.id" cols="12" md="3">
          <v-menu v-model="item.showMenu" :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="item.showMenu = false;"></v-date-picker>
          </v-menu>
        </v-col>
      </template>
    </v-row>
    {{dateArr}}
  </v-app>
</div>

额外说明 #

顺便给遍历的v-col补了key属性，这是Vue列表渲染的必要要求，避免出现渲染异常。修改后时间选择器就可以和日期选择器一样，选中值后自动同步到数组对象的对应属性里。

内容的提问来源于stack exchange，提问作者06011991