Vue.js 如何对v-model值应用格式，并在存储区中提交之前删除格式

我正在为v文本字段中的v模型指定vueex存储值。 此值存储为整数。有没有一种方法可以简单地格式化这个值，让用户在应用更改时更改它并删除格式

格式为###:###:# 但该值以秒为单位存储

我正在使用这种方法：

这是我的商店是如何建立的。我说得很简单：

...
 mutations: {
...
    updateSwimFtp (state, swimFtp) {
      state.athlete.swimFtp = swimFtp
    }
...
  },
...

在我的vue组件中，我使用计算属性获取值并将其存储在v模型中。格式化发生在get（）中，而非格式化发生在set（）中

。。。
...
计算：{
运动员（）{
退回此项。$store.state.atternate
},
swimFtp：{
得到（）{
var日期=新日期（空）；
date.setSeconds（此.store.state.athletor.swimFtp）；
返回日期.toISOString（）.substr（11,8）；
},
设置（值）{
var hoursInSecs=parseInt（字符串（this.$store.state.athleter.swimFtp）.substring（0,2），10）*60*60；
var minsecenses=parseInt（字符串（this.$store.state.athleter.swimFtp）.substring（3,5），10）*60；
var secs=parseInt（字符串（this.$store.state.athleter.swimFtp）.substring（6,8,10）；
var _secsToStore=小时数+分钟数+秒数；
这个.store.commit（'updateSwimFtp'，_secsToStore）；
}
},
},
...

这种方法的问题是，当用户单击back/delete键时，它调用set（）方法。因为它是双向绑定方法，所以值存储时使用了错误的值，get（）会再次对其进行格式化

---

有没有办法只使用文本字段中的return key事件，或者我应该使用其他方法？

终于有办法了

简化了store.js方法：

  mutations: {
    setSwimFtp (state, swimFtp) {
      state.athlete.swimFtp = swimFtp
    }
  },

  actions: {
    //TODO post to server here
    updateSwimFtp ({ commit }, value) {
      commit('setSwimFtp', value);
    }
  }

在我的vue组件中，我在文本字段中添加了一条返回屏蔽值的指令。这将返回带有掩码的值

<template>
    <v-flex xs12 sm6 offset-sm3>
    <form
            lazy-validation
            ref="form">
        <v-text-field
                :label="$vuetify.t('$vuetify.swimFtp')"
                :hint="$vuetify.t('$vuetify.swimFtp')"
                v-model="swimFtp"
                mask="time-with-seconds"
                return-masked-value="true"
                required>
        </v-text-field>

        <v-btn @click="**submit**">submit</v-btn>
        <v-btn @click="clear">clear</v-btn>
    </form>

    </v-flex>
</template>

最后，在提交表单时，我删除了格式，以确保值在几秒钟内发送到服务器数据库，而不是使用屏蔽值

        methods: {

            submit: function() {
                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.dispatch('updateSwimFtp', _secsToStore)
            },

        },

        computed: {

            swimFtp: {
                get () {
                    var date = new Date(null);
                    var _val = String(this.$store.state.athlete.swimFtp);
                    if ( _val.includes(":") )
                        return this.$store.state.athlete.swimFtp;
                    else {
                        date.setSeconds(this.$store.state.athlete.swimFtp);
                        return date.toISOString().substr(11, 8);
                    }
                },


                set (value) {
                    this.$store.commit('setSwimFtp', value);
                }
            }

        },

        methods: {

            submit: function() {
                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.dispatch('updateSwimFtp', _secsToStore)
            },

        },