Vue.Js Filters to Computed - 如何使用？

Question

更新说明

当用户离开该字段时，我需要将格式化的值设置回该字段 - 这就是我使用过滤器的原因，因此当用户输入 10.1 并离开该字段时，该字段将自动更新为显示 10.10

对不起，如果我没有更早地澄清这一点

**您或任何人有任何想法吗？

伯特解决了！

我分叉了他的 CodePen 并添加了一个空值检查，所以我可以只显示一个空白（我自己的总线要求）：

Forked Example

---

我有以下从 1.0 过滤器转换而来的计算函数。 目的：将输入的十进制金额格式化为 nnnn.nn 类型格式，以便输入 10.10 将返回 10.10 而不是未格式化的 10.1。

我想为用户即时格式化（他们的请求不是我的）

    computed:
    {
        decimalComputed:
        {
            get: function (value)
            {
                var newFloat = parseFloat(value);
                return newFloat.toFixed(2);
            },
            set: function (value)
            {
                var newFloat = parseFloat(value);
                return newFloat.toFixed(2);
            }
        },
    },

问题是，当我尝试将其用作函数时，我收到一个错误，告诉我 decimalComputed 不是函数，因此我将其设置为 html 中的属性，但随后没有任何格式。

这是我如何调用的示例：

<input :id="'cash_tips-' + index" type="text" 
    v-model="decimalComputed = tip.cash_tips" pattern="\d*" number />

我不在乎我是否不使用计算我只需要解决问题：在用户输入它们之后格式化值

欢迎任何帮助。

我会在几个小时后回来更新是否需要

谢谢！

Answer 1

在这种情况下，我可能会使用一个小组件。

Vue.component("formatted-number",{
  props:["value", "decimals"],
  data(){
    return {
      internalValue: this.format(this.value)
    }
  },
  methods:{
    format(value){ return parseFloat(value).toFixed(this.decimals || 2);},
    onChange(){this.$emit('input', this.format(this.internalValue))}
  },
  template:'<input type="text" v-model="internalValue" @input="onChange" />'
})

然后像这样在你的模板中使用它

<formatted-number v-model="tip.cash_tips" :decimals="2"></formatted-number>

Example.

发表评论编辑

Vue.component("formatted-number",{
  props:["value", "decimals"],
  data(){
    return {
      internalValue: this.format(this.value)
    }
  },
  methods:{
    format(value){ return parseFloat(value).toFixed(this.decimals || 2);},
    onChange(){this.$emit('input', this.format(this.internalValue))},
    onBlur(){this.internalValue = this.format(this.internalValue)}
  },
  template:'<input type="text" v-model="internalValue" @input="onChange" @blur="onBlur" />'
})