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

Question

我有一个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该函数接受一个数据参数，而不是重复自己这么多？

Answer 1

你可以使用一个方法：

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> 

Answer 2

通常对于这种事情我会做一小部分。下面的示例删除了验证（只是为了使示例更简单），但它的作用与常规输入元素相同。

使用组件的好处在于，您想要执行的验证仅限于各个元素，并且可以轻松地重复使用。

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/vue@2.4.2"></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>