在VUEJS中的错误时免费提交表格

Question

我目前正在Vue中构建表格，并且当表格没有错误消息时，我很难提交表格。

我目前已解决，以便错误显示何时应显示，但目标是在按下提交按钮后更改页面。

我将感谢任何可以帮助我的技巧：）

html

<template>
  <form @submit.prevent="submitMessage">
    <div class="form-control">
      <label for="user-name">Name*</label>
      <input id="user-name" name="user-name" type="text" v-model="userName" />
    </div>
    <div class="form-control">
      <label for="age">Age</label>
      <input id="age" name="age" type="number" v-model="userAge" />
    </div>
    <div class="form-control">
      <label for="email">Email*</label>
      <input id="email" name="email" type="email" v-model="email" />
    </div>
    <div class="form-control">
      <label for="referrer">How did you hear about us?</label>
      <select id="referrer" name="referrer" v-model="referrer">
        <option value="google">Google</option>
        <option value="wom">Word of mouth</option>
        <option value="newspaper">Social Media</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div class="form-control">
      <label for="message">Message*</label>
      <textarea rows="5" cols="50" id="message" name="message" v-model="message">Aa</textarea>
    </div>
    <div>
      <button id="send" @click="sendForm()">Send Message</button>
    </div>
    <div class="errors">
      <p v-if="errors.length > 0">
        <b>Please correct the following error(s):</b>
        <ul>
          <li v-for="error in errors">{{ error }}</li>
        </ul>
      </p>
    </div>
  </form>
</template>

vue

<script>

export default {
  data() {
    return {
      userName: '',
      userAge: null,
      referrer: 'google',
      email: '',
      message: '',
      errors: []
    };
  },
  methods: {
    submitMessage(e) {
      this.userName = '';
      this.userAge = null;
      this.email = '';
      this.referrer = 'google';
      this.message = ''
    },
    sendForm() {
      this.errors = [];
      if (!this.userName) {
        this.errors.push('Name is required');
      }
      if (!this.email) {
        this.errors.push('Email is required');
      } else if (!this.validEmail(this.email)) {
        this.errors.push('Valid email required.');
      }
      if (!this.message) {
        this.errors.push('Message is required');
      }
      if (!this.errors.length) {
        return true;
      }
      if (this.errors.any()) {
        this.$router.push('/thankyou');
      }
    },
    validEmail: function (email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  }
}

</script>

router.js

import {
    createRouter,
    createWebHistory
} from 'vue-router';


import HomeBeerSearch from './pages/beers/HomeBeerSearch.vue';
import BeerList from './pages/beers/BeerList.vue';
import CustomerSupport from './pages/contact/CustomerSupport.vue';
import ThankYou from './pages/contact/ThankYou.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [{
            path: '/',
            component: HomeBeerSearch
        },
        {
            path: '/beers',
            component: BeerList
        },
        {
            path: '/support',
            component: CustomerSupport
        },
        {
            path: '/thankyou',
            component: ThankYou
        }
    ]
});

export default router

Answer 1

您可以在SPA上通过VUE路由器更改页面：

this.$router.push({ name: 'route name' })

或者可以将RAW JavaScript用于外部链接：

window.location.href = 'http://www.google.com';

Answer 2

    // there is no such function errors.any()
    if (this.errors.any()) {
        this.$router.push('/thankyou');
    }

您正确地进行导航，但我认为IF Statment逻辑有些缺陷。而是尝试一下：

    // check if there are errors; if not go to the thank you page
    if (!this.errors.length) {
         this.$router.push('/thankyou');
    }