我正在将 vueex 存储值分配给 v-text-field 中的 v-model。此值存储为整数。有没有办法简单地格式化这个值,让用户在应用更改时更改它并删除格式?
格式为##:##:## 但值以秒为单位存储。
我正在使用这种方法:https ://vuex.vuejs.org/guide/forms.html
这是我的商店的建造方式。我保持简单:
...
mutations: {
...
updateSwimFtp (state, swimFtp) {
state.athlete.swimFtp = swimFtp
}
...
},
...
在我的 vue 组件中,我使用计算属性来获取值并将其存储在 v-model 中。格式化发生在 get() 中,而取消格式化发生在 set() 中。
...
<v-text-field
:label="$vuetify.t('$vuetify.swimFtp')"
:hint="$vuetify.t('$vuetify.swimFtp')"
mask="time-with-seconds"
v-model="swimFtp"
required>
</v-text-field>
...
computed: {
athlete() {
return this.$store.state.athlete
},
swimFtp: {
get () {
var date = new Date(null);
date.setSeconds(this.$store.state.athlete.swimFtp);
return date.toISOString().substr(11, 8);
},
set (value) {
var hoursInSecs = parseInt (String( this.$store.state.athlete.swimFtp ).substring(0, 2),10)*60*60;
var minsInSecs = parseInt (String( this.$store.state.athlete.swimFtp ).substring(3, 5),10)*60;
var secs = parseInt (String( this.$store.state.athlete.swimFtp ).substring(6, 8),10);
var _secsToStore = hoursInSecs+minsInSecs+secs;
this.$store.commit('updateSwimFtp', _secsToStore);
}
},
},
...
这种方法的问题在于,当用户单击返回/删除键时,它会调用 set() 方法。由于它是双向绑定方法,因此该值以错误的值存储,并且 get() 再次对其进行格式化。
有没有办法只使用文本字段中的返回键事件,还是我应该使用其他方法?