Question

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

格式为##：##：## 但是该值以秒为单位存储。

我正在使用这种方法：https://vuex.vuejs.org/guide/forms.html

这是我的商店的建设方式。我保持简单：

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

在我的vue组件中，我使用计算属性来获取值并将其存储在v模型中。格式化发生在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（）再次对其进行格式化。

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

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

        },

如何在存储中提交之前将格式应用于v模型值并删除格式

1 个答案: