单击按钮后如何添加成功消息？

Question

<template>
    
<div>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" v-model="firstName"  placeholder="Enter your name">
  </div>
    
  <div class="form-group">
    <label for="lastName">Last name</label>
    <input type="text" class="form-control" v-model="lastName" placeholder="Enter your last name">
  </div>
    
    <div class="form-group">
    <label for="message">Type Your message</label>
    <textarea class="form-control" v-model="message" rows="3"></textarea>
  </div>
    
  <div class="form-group form-check" v-for="number in numbers" :key="number">
    <input type="checkbox" :value="number.Broj" v-model="checkedNumbers">
    <label class="form-check-label" >{{number.Broj}}</label>
  </div>
    <button type="submit" class="btn btn-primary" @click="sendMessage">Send message</button>
</div>
</template>
    
<script>
  import http from "../http-common.js";
  import userServices from "../services/userServices.js";
  export default {
    data()
    {
      return {
        firstName: null,
        lastName: null,
        message: null,
        numbers: "",
        checkedNumbers: [], 
      }; 
    },
    methods:
    {
      async sendMessage()
      {
        await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
        this.$data.firstName = "",
        this.$data.lastName = "",
        this.$data.checkedNumbers = [],
        this.$data.message = "";
      },
    
      retrieveNumbers() {
        userServices.getNumbers().then(response => {
          this.numbers = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }
    
    },
    created() {
      this.retrieveNumbers();
    }
  }
    
</script>

点击发送消息按钮后如何向用户添加成功消息？例如“消息已发送”

我有一个完美工作的表单，我可以将数据插入数据库并通过表单将数据写入文本文件。表单验证后使用 axios。用户单击按钮后，我只是在努力显示成功消息。

谢谢

Answer 1

你可以在 Promise 返回后做一些事情，比如：

await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers}).then((response) => {
  // Do something with the response
})

然后，您可以从 SweetAlert documentation 弹出一个带有您要显示的消息的 swal。