如何在商店提交之前将格式应用于 v-model 值并删除格式

Question

我正在将 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);
                }
            },

        },
...

这种方法的问题在于，当用户单击 back/delete 键时，它会调用 set() 方法。由于它是双向绑定方法，因此该值以错误的值存储，并且 get() 再次对其进行格式化。

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

Answer 1

终于有了一些工作。

简化了 store.js 方法：

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

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

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

<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>

我已经简化了 setter 来存储掩码值而不尝试取消该值的格式。这修复了用户修改值时字段的闪烁。 Vue.js 将对每次更改做出反应，get 将显示部分用户输入。所以只存储字段中的内容。

        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)
            },

        },

如何在商店提交之前将格式应用于 v-model 值并删除格式

How to apply formatting to v-model value and remove formatting before commiting in store

vue.js

v-model