vue.js - 如何在 vuetifyjs 中放置 v-text-field 错误消息？

Question

我有 v-text-field 并且我无法在 v-text-field dom 位置之外显示错误消息。在 vuetify 文档中没有提到这个问题。

是否可以在输入附近显示错误消息？

实际:

预期:

<template>
  <v-app>
    <v-content>
      <playground></playground>
      <v-text-field
        style="width:120px;"
        class="numer"
        :rules="[rules.required, rules.min, rules.max]"
        v-model="numValue"
        type="number"
        append-outer-icon="add"
        @click:append-outer="increment"
        prepend-icon="remove"
        @click:prepend="decrement"
      ></v-text-field>
      {{numValue}}
    </v-content>
  </v-app>
</template>

<script>
import Playground from "./components/Playground";

export default {
  name: "App",
  components: {
    Playground
  },
  data: function() {
    return {
      numValue: 0,
      form: {
        min: 2,
        max: 10
      },
      rules: {
        required: value => !!value || "Required.",
        min: v => v >= this.form.min || `The Min is ${this.form.min}`,
        max: v => v <= this.form.max || `The Max is ${this.form.max}`
      }
    };
  },
  methods: {
    increment() {
      if (this.numValue < this.form.max) {
        this.numValue = parseInt(this.numValue, 10) + 1;
      }
    },
    decrement() {
      if (this.numValue > this.form.min) {
        this.numValue = parseInt(this.numValue, 10) - 1;
      }
    }
  }
};
</script>

<style>
.numer {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.numer input {
  text-align: center;
}
</style>

The code in codesandbox

Answer 1

我知道我迟到了，但如果有人需要帮助:

将这个字段放在一个表单中。

<v-form ref="form">
 <v-text-field
    style="width:120px;"
    class="numer"
    :rules="[rules.required, rules.min, rules.max]"
    v-model="numValue"
    type="number"
    append-outer-icon="add"
    @click:append-outer="increment"
    prepend-icon="remove"
    @click:prepend="decrement"
 ></v-text-field>
</v-form>

然后在模板的任何地方调用:

<div @click="$refs.form.validate()">Validate it!</div>

或者在函数上:

methods: {
    foo() {
       this.$refs.form.validate()
    }
}