vue.js - 如何在存储中提交之前将格式应用于 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);
                }
            },

        },
...

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

有没有办法只使用文本字段中的返回键事件，还是我应该使用其他方法？

标签： vue.jsv-model

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 组件中，我在文本字段中添加了一条返回屏蔽值的指令。这将返回带有掩码的值。

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

我已经简化了设置器以存储屏蔽值，而无需尝试取消格式化该值。当用户修改值时，这修复了字段的闪烁。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)
            },

        },