vue.js template怎么插入到页面中

Posted 2023-05-08

参考技术A 首先，它允许我们能够编写一个分离的html文件作为模板，这样子我们就能在编辑的时候看到正确的语法高亮，这也是很多开发者喜欢的原因（注：我觉得这是因为现在的人越来越懒，越来越依赖IDE的原因）。

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

【中文标题】将日期插入数据库后如何在vue js中显示成功消息

【英文标题】：How to show success message in vue js after inserting the date into database

【发布时间】：2019-09-27 23:03:21

【问题描述】：

我有一个完美工作的表单，我可以在表单验证后使用 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>

【问题讨论】：

您可以使用 vuetify 快餐栏在成功添加时显示自定义成功消息（您的帖子响应的其他块）或错误时显示错误消息

【参考方案1】：

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

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

现在在你的表单中使用它

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

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

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

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

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

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

【讨论】：

很好的答案，但遗憾的是，JSFiddle 链接不起作用。但这很有帮助，谢谢！