v-text-field에 유형 번호가 있는데도 입력 후 문자열을 반환함

v-text-field에 유형 번호가 있는데도 입력 후 문자열을 반환함

<VTextField
                :value="addOnStartingPrice"
                solo
                outline
                reverse
                append-icon="attach_money"
                type="number"
                min="0"
                step="any"
                @input="$emit('update:addOnStartingPrice', $event)"
              />

이런 게 있어요.

질문 1) 번호를 변경하거나 입력하는 즉시 숫자 값이 올바르게 입력되지만 유형이 숫자 대신 문자열이기 때문에 유형 확인이 실패합니다.type:number로 값을 반환하려면 어떻게 해야 합니까?

질문 2) 정확히 어떤 기능합니까?step="any" and min="0"그래요? 음수도 칠 수 있으니까 안 먹히나 봐요.

참으로 vuetify는 문자열을 반환합니다.회피책으로 번호 수식자를 사용할 수 있습니다.

<v-text-field type="number" v-model.number="computedAddOnStartingPrice" />

그리고 다음과 같은 계산된 속성을 가질 수 있습니다.

computed: {
  computedAddOnStartingPrice: {
    get () { return this.addOnStartingPrice },
    set (newVal) { this.$emit('update:addOnStartingPrice', newVal) }
  }
}

에 따라서step속성 읽기 HTML 입력 단계.

그리고...min특성 읽기Html 입력 최소값

vuetify 규칙을 사용하여 사용자가 양수를 입력했는지 확인할 수도 있습니다.예:

    <v-text-field
      type="number"   
      step="any"
      min="0"
      :rules="[numberRule]"
      v-model.number="computedAddOnStartingPrice"
    ></v-text-field>

그numberRule:

  data: () => ({
    //...
    numberRule: val => {
      if(val < 0) return 'Please enter a positive number'
      return true
    }
  })

실제 상황 보기

변환만 하면 됩니다.Number에서@input핸들러

<VTextField
  :value="addOnStartingPrice"
  solo
  outline
  reverse
  append-icon="attach_money"
  type="number"
  min="0"
  step="any"
  @input="$emit('update:addOnStartingPrice', Number($event))"
  />

이 문제는 InputElements의 값 속성이 문자열이기 때문에 여기에 있습니다.

그리고 필요할 때 캐스팅됩니다.

---

한 가지 할 수 있는 것은 확장/오버라이드를 통해 "수정"하는 것입니다.

import * as comps from "vuetify/es5/components";

...

const override = comps.VTextField.extend({
  onInput(e) {
    const target = e.target;
    if (this.type !== "number") this.internalValue = target.value;
    else {
      this.internalValue = target.valueAsNumber;
    }
    this.badInput = target.validity && target.validity.badInput;
  }
});
Vue.component('NewVTextField, override);

---

또는, 다음의 「회피책」에 의한$emit(+$event)이것은 의도된 경로인 것 같기 때문에

---

하지만 세터, 게터 aproach를 사용하는 것이 좋을 것 같습니다.세터에서는 검증자도 체인 할 수 있기 때문입니다.

체크: @roli loli:

computed: {
  computedAddOnStartingPrice: {
    get () { return this.addOnStartingPrice },
    set (newVal) { this.$emit('update:addOnStartingPrice', newVal) }
  }
}

<input v-model.number="price" type="number">
data() {
    return {
      price: '',
    }
  },

정수를 저장합니다.

언급URL : https://stackoverflow.com/questions/57275723/v-text-field-returns-string-after-typing-even-though-it-has-type-number