vue3 简单时间选择器错误

Question

我最近在寻找简单的时间选择器解决方案时遇到了 Vue-time-picker 存储库（https://github.com/phoenixwong/vue3-timepicker）。尽管处于 Beta 模式，但它似乎兼容并且能够满足工作要求。

但是，我遇到了一个问题：通过单击按钮更改状态后，状态更改成功，但时间选择器的值没有更新。我想知道是否有人对替代库有任何见解、错误修复或建议？ 这是我的代码：

<template>
  <div>
    <h1>Time Picker</h1>
    state : {{ rest_time }}
    <vue-timepicker format="hh:mm:ss" v-model="rest_time"></vue-timepicker>
    <button @click="change">make time 10:20:40</button>
  </div>
</template>
<script>
// import axios from "@axios";
import VueTimePicker from "vue3-timepicker";
import "vue3-timepicker/dist/VueTimepicker.css";
export default {
  components: {
    "vue-timepicker": VueTimePicker,
  },
  data: () => ({
    rest_time: {
      hh: "10",
      mm: "20",
      ss: "20",
    },
  }),
  methods: {
    change() {
      this.rest_time = {
        hh: "10",
        mm: "20",
        ss: "40",
      };
    },
  },
  mounted() {
    this.rest_time = {
      hh: "10",
      mm: "20",
      ss: "30",
    };
  },
};
</script>

这是一个展示该问题的游乐场

Answer 1

您可以使用具有时间类型的原生

<input>

元素：

<input type="time" v-model="rest_time" step="1">

在本例中，

rest_time

是一个类似于

18:00:00

的字符串。