vue.js - 将日期插入数据库后如何在vue js中显示成功消息

Question

我有一个完美工作的表单，我可以在表单验证后使用 axios 将数据插入数据库。我只是在将数据插入数据库后努力显示成功消息。如何在将数据发送到数据库后隐藏表单并在同一部分显示成功消息？

这是我完美工作的代码

<template>
  <b-container>
    <div class="update-info">
      <div class="feature-text myinv-title">
        <h5 class="title title-sm">Update your information</h5>
      </div>
    <div>
      <form @submit.prevent="submit">
        <p v-if="errors.length">
          <b>Please fill in all the fields</b>
          <ul>
            <li v-for="error in errors" class="alert alert-danger">{{ error }}</li>
          </ul>
        </p>

         <div class="form-row">
           <div class="form-group col-md-3">
             <label for="trx number">TRX No</label>
             <input
               type="text"
               name="trx Number"
               v-model="newUser.trx"
               class="form-control trx-address-nooverflow"
               placeholder="Copy paste your TRX no"
             />
             <b-form-text id="input-formatter-help">
              <a class="text-success">Your TRX address: {{trxNo}}</a>
             </b-form-text>
           </div>
           <div class="form-group col-md-3">
             <label for="name">Name</label>
             <input
               type="text"
               name="name"
               v-model="newUser.name"
               class="form-control"
               placeholder="Enter you name"
             />
           </div>
           <div class="form-group col-md-3">
             <label for="email">Email</label>
             <input
               type="text"
               name="email"
               v-model="newUser.email"
               class="form-control"
               placeholder="Enter valid email address"
             />
           </div>
           <div class="form-group col-md-3">
             <label for="country">Country</label>
             <country-select
               id="Country"
               v-model="newUser.country"
               :country="newUser.country"
               topCountry="US"
               class="form-control"
             />
           </div>
           <div class="form-group col-md-3">
             <label for="mobile">Mobile No</label>
             <input
               id="mobile"
               class="form-control"
               v-model="newUser.mobile_no"
               type="text"
               placeholder="Enter your mobile no."
             />
             <b-form-text id="input-formatter-help">
              Please enter valid phone number
             </b-form-text>
           </div>

           <div class="form-group col-md-3">
             <div class="top-30">
               <input type="submit" class="btn btn-btn btn-grad btn-submit" />
             </div>
           </div>
         </div>
        </form>
    </div>

    </div>
  </b-container>
</template>

这是我的 vue js 代码

<script>
import axios from 'axios'

export default{
  data(){
    return{
      errorMessage: "",
      successMessage: "",
      text: "success",
      errors: [],
      users: [],
      newUser: {trx: "", name: "", country: "", email: "", mobile_no: ""}
    }
  },
  computed: {
    trxNo: function() {
      return this.$store.state.myAddress;
    }
  },
  mounted: function(){
    this.getAllUsers();
  },
  methods:{
    getAllUsers: function(){
      axios.get('https://onex.tronpayer.com/api/update-info-form.php?action=read', { crossdomain: true })
      .then((response) => {
        if(response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.users = response.data.users;
        }
        });
    },

    submit(){
      this.checkForm()
      if(!this.errors.length) {

      var formData = this.toFormData(this.newUser);
      axios.post('https://onex.tronpayer.com/api/update-info-form.php?action=update', formData, { crossdomain: true })
      .then((response) => {
        this.newUser = {trx: "", name: "", country: "", email: "", mobile_no: ""};
        if(response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.getAllUsers();
        }
        });
      }
    },

    toFormData: function(obj){
      var form_data = new FormData();
      for(var key in obj){
        form_data.append(key, obj[key]);
      }
      return form_data;
    },
    clearMessage: function(){
      this.errorMessage = "";
      this.successMessage = "";
    },
    //validation
    checkForm: function (e) {
      this.errors = [];

      if (!this.newUser.trx) {
        this.errors.push("Trx Number Required.");
      }
      if (!this.newUser.name) {
        this.errors.push("Name Required.");
      }
      if (!this.newUser.country) {
        this.errors.push("Country Required.");
      }
      if (!this.newUser.email) {
        this.errors.push('Email Required.');
      } else if (!this.validEmail(this.newUser.email)) {
        this.errors.push('Valid Email Address Required.');
      }
      if (!this.newUser.mobile_no) {
        this.errors.push("Mobile Number Required.");
      }

      if (!this.errors.length) {
        return true;
      }

    },

    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>

Answer 1

您可以使用 v-if 条件渲染来禁用表单并显示消息。 https://v2.vuejs.org/v2/guide/conditional.html

只需创建一个类似 savingSuccessful: false 的变量，并在 ajax 请求成功时将其设置为 true 。

现在在您的表单中使用它，例如

 <form @submit.prevent="submit" v-if="!savingSuccessful">

这意味着您的表单将一直显示，直到您的变量为 true。

对于成功消息，您可以创建如下内容:

<div class="success" v-if="savingSuccessful"> 
    {{ this.text }} 
</div>

当变量为 true 时，将呈现您的消息。

这里有一个 JSFiddle: https://jsfiddle.net/MichelleFuchs/nydruxzw/2/