Vue 계산 속성의 매개 변수를 사용하여 함수를 재사용하는 방법

Vue 계산 속성의 매개 변수를 사용하여 함수를 재사용하는 방법

다른 값에 대해 동일한 작업을 수행하는 5개의 계산된 속성 함수가 있는 Vue 인스턴스가 있습니다.몇 번이고 반복하고 있는데, 그렇게 반복하지 않고 좀 더 깔끔하게 할 수 있는 방법이 있을까요?

HTML 템플릿에는 5개의 입력 필드가 있으며 각 입력 필드는 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>

5개의 밭이 있는데, 그 밭과 똑같아 보이는 게다만약에 그 밭은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";
        }
    },

데이터 파라미터를 받아들이고 반복하지 않도록 이 기능을 다시 사용하려면 어떻게 해야 합니까?

보통 이런 종류의 물건을 만들기 위해 작은 부품을 만듭니다.다음 예제에서는 검증을 삭제하지만(예시를 쉽게 하기 위해) 일반 입력 요소와 동일하게 작동합니다.

컴포넌트를 사용하는 장점은 검증이 개별 요소에 적용되어 쉽게 재사용할 수 있다는 것입니다.

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>

다음과 같은 방법을 사용할 수 있습니다.

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>

언급URL : https://stackoverflow.com/questions/46694170/how-to-reuse-function-with-parameters-in-vue-computed-properties