如何使用 Vue-SweetAlert2 传递用户输入并更新数据答案

【问题标题】：How to pass a user input and update the data using Vue-SweetAlert2如何使用 Vue-SweetAlert2 传递用户输入并更新数据
【发布时间】：2019-07-01 10:33:58
【问题描述】：

我目前正在尝试制作一个“创建”按钮，该按钮触发带有用户文本输入的弹出窗口，如下图所示。

如果它按我的意愿工作，它应该在单击“确定”按钮时存储在文本字段中写入的名称，然后该名称应该反映在页面上，如下所示，因为我输入了自己的名字“Shinichi”输入。

Test result of createCustomer: Shinichi

但实际上，显示的是硬编码的对象，它在下面的代码中的 alertDisplay() 方法中定义。

Test result of createCustomer: { "params": { "title": "What is your Name?", "input": "text", "inputPlaceholder": "Enter your name here", "showCloseButton": true } }

<template>
      <v-btn class="create-button" color="yellow" @click="alertDisplay">Create</v-btn>

    <br/>

    <p>Test result of createCustomer: {{ createdCustomer }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        createdCustomer: null
      }
    },
    methods: {
      alertDisplay() {
        var customer = this.$swal({
                          title: 'What is your Name?',
                          input: 'text',
                          inputPlaceholder: 'Enter your name here',
                          showCloseButton: true,       
                        });
        console.log(customer);
        this.createdCustomer = customer; 
      }
    }
  }
</script>

如何传递名称并将其显示在屏幕上，而不是像附件图像中的对象？

【问题讨论】：

标签： javascript vue.js vue-sweetalert2

【解决方案1】：

您必须使用 Promise 来获取 swal 模态的用户输入。

async alertDisplay() {
    let customer = await this.$swal({
        title: 'What is your Name?',
        input: 'text',
        inputPlaceholder: 'Enter your name here',
        showCloseButton: true,       
    });
    console.log(customer)
}

您可以在文档中找到的这个 Codepen 中看到它： https://codepen.io/pen/?&editable=true

【讨论】：

字段不能为空怎么办？怎么可能需要一套？