如何使用Vue计算属性中的参数重用函数?
我有一个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>
我有五场,看起来完全一样除了他们说engraving.line2
,engraving.line3
,engraving.line4
和engraving.line5
。
然后我的组件javascript我定义雕刻对象,并为每个字段具有相同的计算方法。
export default {
data(){
return {
engraving: {
line1: '',
line2: '',
line3: '',
line4: '',
line5: '',
}
};
},
computed: {
line1count() {
var chars = this.engraving.line1.length,
limit = 25;
return (limit - chars) + "/" + limit + " characters remaining";
},
line2count(){
var chars = this.engraving.line2.length,
limit = 25;
return (limit - chars) + "/" + limit + " characters remaining";
},
line3count(){
var chars = this.engraving.line3.length,
limit = 25;
return (limit - chars) + "/" + limit + " characters remaining";
},
line4count(){
var chars = this.engraving.line4.length,
limit = 25;
return (limit - chars) + "/" + limit + " characters remaining";
},
line5count(){
var chars = this.engraving.line5.length,
limit = 25;
return (limit - chars) + "/" + limit + " characters remaining";
}
},
我怎样才能resuse该函数接受一个数据参数,而不是重复自己这么多?
你可以使用一个方法:
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>
通常对于这种事情我会做一小部分。下面的示例删除了验证(只是为了使示例更简单),但它的作用与常规输入元素相同。
使用组件的好处在于,您想要执行的验证仅限于各个元素,并且可以轻松地重复使用。
console.clear()
Vue.component("engraving-line",{
props:["value", "placeholder", "limit"],
template:`
<div class='field is-grouped'>
<p class='control is-expanded'>
<input
class="input"
:placeholder="placeholder"
v-model='internalValue'>
</p>
<p class='control'>
<span>{{ lineCount }}</span>
</p>
</div>
`,
computed:{
internalValue:{
get() {return this.value},
set(v) {this.$emit("input", v)}
},
lineCount(){
return `${this.limit - this.value.length}/${this.limit} characters remaining`
}
}
})
new Vue({
el: "#app",
data:{
line1: "",
line2: "",
line3: "",
line4: "",
lineLimit: 25
}
})
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
<engraving-line :limit="lineLimit"
v-model="line1"
placeholder="Trophy engraving line 1 (25 character limit)">
</engraving-line>
<engraving-line :limit="lineLimit"
v-model="line2"
placeholder="Trophy engraving line 2 (25 character limit)">
</engraving-line>
<engraving-line :limit="lineLimit"
v-model="line3"
placeholder="Trophy engraving line 3 (25 character limit)">
</engraving-line>
<engraving-line :limit="lineLimit"
v-model="line4"
placeholder="Trophy engraving line 4 (25 character limit)">
</engraving-line>
</div>
是否有这种模式的任何名称?,我真的很喜欢这个解决方案 – ricardoorellana
@RicardoOrellana我不知道有一个特定的模式,我可以指出,除了识别可重用的UI元素。在这种情况下,基本上我们需要一个输入元素,但是有一点额外的UI显示一些额外的信息。就像将代码分解为可重用的函数一样,使用Vue(或React等其他组件基础框架),您将认识到将UI分解为可重用组件的机会。 – Bert
这是使一个伟大的小部件之类的话。 – Bert