如何使用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>