Vue에서 숫자 입력 구성 요소를 생성하는 방법(제한을 초과하여 입력할 수 없음)

Vue에서 숫자 입력 구성 요소를 생성하는 방법(제한을 초과하여 입력할 수 없음)

Vue에서 최소값과 최대값을 사용하여 외부 제한을 입력할 수 없는 숫자 입력 구성 요소를 생성하려고 합니다.

<template id="custom-input">
  <div>
    <input :value="value" type="number" @input="onInput">
  </div>
</template>

<div id="app">
  <div>
    <span>Value: {{ value }}</span>
    <custom-input v-model="value" :max-value="50"/>
  </div>
</div>

Vue.component('custom-input', {
  template: '#custom-input',
  props: {
    value: Number,
    maxValue: Number
  },
  methods: {
    onInput(event) {
      const newValue = parseInt(event.target.value)
      const clampedValue = Math.min(newValue, this.maxValue)
      this.$emit('input', clampedValue)
    }
  }
})

new Vue({
  el: "#app",
  data: {
    value: 5
  }
})

여기를 클릭해 주세요.https://jsfiddle.net/8dzhy5bk/6/

위의 예에서는 최대값이 50으로 설정되어 있습니다.60을 입력하면 입력 내에서 50으로 자동 변환되지만 세 번째 숫자를 입력하면 입력을 계속할 수 있습니다.부모에게 전달된 값은 클램프되지만 더 이상 숫자를 입력할 수 없도록 입력을 제한해야 합니다.

입력 값이 10보다 크면 항상 10을 부모 구성요소로 방출하지만 값은 동일하게 유지되므로(항상=10) 반응성을 트리거하지 않습니다.

하나의 솔루션으로 항상 실제 가치를 창출합니다(=parseInt(event.target.value)먼저 최대값(=)을 방출합니다.Math.min(newValue, this.maxValue))의 경우vm.$nextTick()

또 다른 솔루션은this.$forceUpdate().

아래는 의 데모입니다.$nextTick.

Vue.component('custom-input', {
  template: '#custom-input',
  props: {
    value: Number,
    maxValue: Number
  },
  methods: {
    onInput(event) {
      const newValue = parseInt(event.target.value)
      const clampedValue = Math.min(newValue, this.maxValue)
      this.$emit('input', newValue)
      this.$nextTick(()=>{
      	this.$emit('input', clampedValue)
      })
    }
  }
})

new Vue({
  el: "#app",
  data: {
    value: 5
  },
  methods: {
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<template id="custom-input">
  <div>
    <input 
      :value="value" 
      type="number" 
      @input="onInput" 
     >
  </div>
</template>

<div id="app">
  <div>
    <span>Value: {{ value }}</span>
    <custom-input v-model="value" :max-value="10"/>
  </div>
</div>

아래는 의 데모입니다.vm.$forceUpdate.

Vue.component('custom-input', {
  template: '#custom-input',
  props: {
    value: Number,
    maxValue: Number
  },
  methods: {
    onInput(event) {
      const newValue = parseInt(event.target.value)
      const clampedValue = Math.min(newValue, this.maxValue)
      this.$emit('input', clampedValue)
      this.$forceUpdate()
    }
  }
})

new Vue({
  el: "#app",
  data: {
    value: 5
  },
  methods: {
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<template id="custom-input">
  <div>
    <input 
      :value="value" 
      type="number" 
      @input="onInput" 
     >
  </div>
</template>

<div id="app">
  <div>
    <span>Value: {{ value }}</span>
    <custom-input v-model="value" :max-value="10"/>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/52542383/how-to-create-a-numeric-input-component-in-vue-with-limits-that-doesnt-allow-to