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

Posted 2023-04-14

【中文标题】Vue.Js Filters to Computed - 如何使用？

【英文标题】：Vue.Js Filters to Computed - how to use?

【发布时间】：2017-03-16 20:25:43

【问题描述】：

更新说明

当用户离开该字段时，我需要将格式化的值设置回该字段 - 这就是我使用过滤器的原因，因此当用户输入 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 />

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

欢迎任何帮助。

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

谢谢！

【参考方案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" />'
)

【讨论】：

Bert 解决方案是一个很好的解决方案，关于您的代码，我认为您不能将值传递给 getter。

@MohammadAbuMusa format 不是吸气剂。这只是一种方法。我把它做成了一个方法，因为我最初用它来格式化 internalValue。

对不起，我在谈论他的原始代码，而不是你的代码。他将value 传递给computed property

@BertEvans 谢谢。如果可以的话，我会给你2分。你帮助我解决了我的问题，你给了我一个可靠的，真实的，做一个快速组件的例子。一个后续：之前没有做过组件（我们使用 vue 1.x 作为基本版本） - 组件代码在哪里？在它自己的 .js 模块或我需要使用它的同一个 .js 模块中。没关系在哪里使用 - 我刚刚看到了示例链接，所有答案都已得到解答。非常感谢！

@MohammadAbuMusa 你是对的，这是我根据 Vue 上的文档传递数据的最后一次尝试