Vue에서 v-model에 최소/최대 특성을 적용하는 방법

Vue에서 v-model에 최소/최대 특성을 적용하는 방법

현재의 제약 조건min그리고.max길 때문에 존경받지 못한다v-on구현되는 것은 실장되어 있습니다.

<input id="passwordLength"
       class="form-control form-control-sm"
       type="number"
       min="5"
       max="35"
       v-model="options.length">
<span class="input-group-btn" v-on:click="options.length+=1">
  <button class="btn btn-secondary" type="button">
    <i class="fa fa-plus"></i>
  </button>
</span>

질문.

어떻게 하면 제약을 존중하면서도 우아한 구현을 유지할 수 있을까요?

커스텀 수식자를 추가할 수 있습니다.v-model지시:

// function that gets the min and max values for the element and prevents the value of the model from going below the min or above the max
function bindNumberInRange(el, binding, vnode) {
  let model = binding.expression;
  let min = parseInt(el.min);
  let max = parseInt(el.max);
  let val = parseInt(binding.value);

  if ((min !== NaN) && (min >= val)) {
    vnode.context[model] = min;
  } else if ((max !== NaN) && (max <= val)) {
    vnode.context[model] = max;
  }

  el.value = val;
}

// get the original reference to the v-model directive
let modelDirective = Vue.directive('model')

// set a new definition of the v-model directive
Vue.directive('model', {
  bind: function(el, binding, vnode) { 
    // first fire the original v-model bind hook
    modelDirective.bind(el, binding, vnode);

    if (binding.modifiers.range) {
      bindNumberInRange(el, binding, vnode)
    }
  },
  componentUpdated: function(el, binding, vnode) {
    // first fire the original v-model componentUpdated hook
    modelDirective.componentUpdated(el, binding, vnode);

    if (binding.modifiers.range) {
      bindNumberInRange(el, binding, vnode)
    }
  }
})

그 후, 필요한 것은, 다음의 명령어를 추가하는 것 뿐입니다..range의 수식어.v-model모델을 존중하고 싶을 때min그리고.max영향을 받는 요소의 속성:

<input type="number" min="4" max="10" v-model.range="foo">

다음은 CodePen의 예입니다.

다음은 지침에 대한 Vue(반삭제) 문서입니다.

@Focus 를 사용하여 :rules 에 max & min number 검증을 적용합니다.디폴트 최대값을 큰 값으로 설정해 주세요.특정 입력 상자에 포커스를 맞추면 max 및 min 기본값이 모두 업데이트됩니다.(이 텍스트필드는 루프를 사용하여 작성됩니다.

<v-text-field type="number" 
  @focus="validateWhenFocused(item)"
  :rules="numberRules"
  :label="item.questionName"
  v-model="item.value"
  outline>
</v-text-field>

export default {
  data() {
  return {
    numberRules: [
    v => !!v || "Input is required!",
    v =>
      v < this.maxLength ||
      `${this.errorName} must be less than ${this.maxLength} numbers`,
    v =>
      v > this.minLength ||
      `${this.errorName} must be greater than ${this.minLength} numbers`
    ],
    maxLength: 100,
    minLength: 0,
    errorName: "",
  },
  methods: {
    validateWhenFocused(item){
    this.maxLength = item.maxValue
    this.minLength = item.minValue;
    this.errorName = item.questionName
  
    }
  }
}

난 기본적인 걸 했어

사용.

<span class="input-group-btn" 
    v-on:click="options.length=decrement(options.length, {min: 5, max: 35})">
    <button class="btn btn-secondary" type="button">
        <i class="fa fa-minus"></i>
    </button>
</span>

서비스 테스트

import test from "ava";
import formValidator from "../src/services/form-validator";

test("formValidator.increment()", t => {
  t.is(formValidator.increment(1, { min: 0, max: 10 }), 2);
  t.is(formValidator.increment(9, { min: 0, max: 10 }), 10);
  t.is(formValidator.increment(10, { min: 0, max: 10 }), 10);
  t.is(formValidator.increment(-1, { min: 0, max: 10 }), 0);
  t.is(formValidator.increment(-5, { min: 0, max: 10 }), 0);
  t.is(formValidator.increment(5, { min: 0 }), 6);
});

test("formValidator.decrement()", t => {
  t.is(formValidator.decrement(2, { min: 0, max: 10 }), 1);
  t.is(formValidator.decrement(1, { min: 0, max: 10 }), 0);
  t.is(formValidator.decrement(0, { min: 0, max: 10 }), 0);
  t.is(formValidator.decrement(-1, { min: 0, max: 10 }), 0);
  t.is(formValidator.decrement(15, { min: 0, max: 10 }), 10);
});

서비스 코드

export default {
  increment(value, { min = 0, max }) {
    let newValue = value + 1;

    if (newValue < min) return min;
    if (typeof max === "undefined" || newValue <= max) return newValue;
    return value;
  },
  decrement(value, { min, max }) {
    let newValue = value - 1;

    if (newValue < min) return min;
    if (newValue > max) return max;
    if (newValue >= min) return newValue;
    return value;
  }
};

언급URL : https://stackoverflow.com/questions/43285895/how-to-apply-min-max-attribute-to-v-model-in-vue