Javascript 如何在Vue计算属性中使用参数重用函数？

我有一个Vue实例，其中有五个计算属性函数，它们对不同的值执行相同的操作。我重复了很多次，我想知道一个更干净的方法来做到这一点，而不是重复太多

在HTML模板中，我有五个输入字段，每个输入字段限制为25个字符，我想显示一个字符计数器：

        <div class='field is-grouped'>
        <p class='control is-expanded'>
            <input 
                class="input" 
                placeholder="Trophy engraving line 1 (25 character limit)" 
                v-model='engraving.line1' 
                v-validate="'required'"
                :class="{'input': true, 'is-danger': errors.has('engraving.line1') }" 
                name='engraving.line1'>
        </p>
        <p class='control'>
            <span>{{ line1count }}</span>
        </p>
    </div>

---

如何恢复此函数以接受数据参数而不重复太多内容？

您可以使用以下方法：

methods: {
    linecount(line, limit) {
        var chars = this.engraving.line[line].length,
        return (limit - chars) + "/" + limit + " characters remaining";
    },
}

然后在html中引用它：

<p class='control'>
     <span>{{ linecount(1,25) }}</span>
</p>

{{linecount（1,25）}

对于这类事情，我通常会制作一个小组件。下面的示例删除了验证（只是为了简化示例），但其工作方式与常规输入元素类似

使用组件的优点是，您要执行的验证等操作的范围仅限于单个元素，并且易于重用

console.clear（）
Vue.组件（“雕刻线”{
道具：[“值”、“占位符”、“限制”]，
模板：`



{{lineCount}}

`,
计算：{
内部价值：{
get（）{返回此.value}，
set（v）{this.$emit（“input”，v）}
},
行计数（）{
返回剩余的`${this.limit-this.value.length}/${this.limit}个字符`
}
}
})
新Vue({
el:“应用程序”，
数据：{
第1行：“，
第2行：“，
第3行：“，
第4行：“，
限行：25
}
})

这是一种很好的小组件。这种模式有什么名字吗？我很喜欢solution@RicardoOrellana除了识别可重用的UI元素之外，我不确定是否还有一种特定的模式可以指向。在本例中，基本上我们需要一个输入元素，但有一点额外的UI来显示一些额外的信息。就像将代码分解为可重用的函数一样，使用Vue（或其他基于组件的框架，如React），您将认识到将UI分解为可重用组件的机会。

<p class='control'>
     <span>{{ linecount(1,25) }}</span>
</p>