Question

我遇到的一个问题是我有一个vuetify文本字段，并且我试图为其设置最大和最小限制。现在设置min = 0和max = 10有效，但似乎您仍可以粘贴大于10的值。

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row wrap>
        <v-text-field
         type="number"
         min=0
         max=10
         onkeyup="if(this.value > 10) this.value = 10;">    
        </v-text-field>
      </v-layout>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data() {
    return {
    }
  }
 })

使用onkeyup可以正常工作，但是您仍然可以粘贴大于10的值，如果在外部单击，则会显示大于10的值。

Answer 1

使用template <typename OptionType> std::vector<double> PricingUtil::mesh_pricer(OptionType option, std::size_t lower_bound, std::size_t upper_bound, std::size_t mesh_size) { // your code goes here using option safely - it is a copy... // of course you need to call the method a bit differently // with a reference and not a pointer as first param }代替，这样，只要输入变得不集中，代码就会运行以将其设置为最大

Answer 2

使用oninput，我不会对值进行硬编码

oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"

Answer 3

可以使用监视程序来解决此问题。我不知道这是否是最好的方法，但是它可以工作。

Codepen

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row wrap>
        <v-text-field
         v-model="number"
         type="number"
        min=0
         max=10>    
        </v-text-field>
      </v-layout>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      number: 0
    }
  },
  watch: {
    number (val, old) {
      console.log(val, old)
      if (+val > 10) {
        this.number = 10
      }
    }
   }
})

Answer 4

您可以手动将属性放在输入元素上（尽管此解决方案尚不明确，实际上我会称其为hack，但这很容易做到）

在您的字段上放置$ ref

<v-text-field ref="myfield" ... >

然后您可以将其修改为已安装

mounted () {
  const inputElement = this.$refs.myfield.$el.querySelector('input')
  inputElement.min = 0
  inputElement.max = 10
}

您还可以修改其他任何属性，例如step或maxLength（用于文本类型）。引用输入元素API https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Answer 5

您也可以为此使用数据规则。

例如：内部数据

data(){
organization: "",
      organizationRules: [
        (v) => !!v || "Organization is required",
        (v) =>
          (v && v.length <= 50) ||
          "Organization must be less than 50 characters",
      ],
}

内部模板

<template>
<v-text-field
          v-model="organization"
          :counter="50"
          :rules="organizationRules"
          label="Organization"
          required
        ></v-text-field>
</template>

设置输入字段的最大和最小限制？

5 个答案: