显示多个空输入的错误vuejs vuetify

<template>
  <v-form @submit="submitForm">
    <v-text-field v-model="name" label="Name" :rules="[rules.required]"></v-text-field>
    <v-text-field v-model="email" label="Email" :rules="[rules.required, rules.email]"></v-text-field>
    <v-btn type="submit">Submit</v-btn>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      rules: {
        required: value => !!value || 'This field is required.',
        email: value => /.+@.+\..+/.test(value) || 'Invalid email address.',
      },
    };
  },
  methods: {
    submitForm() {
      // 处理表单提交逻辑
    },
  },
};
</script>

<template>
  <v-form @submit="submitForm">
    <v-text-field v-model="name" label="Name" :rules="[rules.required]"></v-text-field>
    <v-messages :value="nameErrors"></v-messages>
    <v-text-field v-model="email" label="Email" :rules="[rules.required, rules.email]"></v-text-field>
    <v-messages :value="emailErrors"></v-messages>
    <v-btn type="submit">Submit</v-btn>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      rules: {
        required: value => !!value || 'This field is required.',
        email: value => /.+@.+\..+/.test(value) || 'Invalid email address.',
      },
    };
  },
  computed: {
    nameErrors() {
      const errors = [];
      if (!this.rules.required(this.name)) {
        errors.push('Name is required.');
      }
      return errors;
    },
    emailErrors() {
      const errors = [];
      if (!this.rules.required(this.email)) {
        errors.push('Email is required.');
      }
      if (!this.rules.email(this.email)) {
        errors.push('Invalid email address.');
      }
      return errors;
    },
  },
  methods: {
    submitForm() {
      // 处理表单提交逻辑
    },
  },
};
</script>