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

Question

我已经v-text-field但无法在v-text-fielddom 位置之外显示错误消息。在 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>

代码在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()
    }
}