如何使用Vue-SweetAlert2

Question

我目前正在尝试创建一个“创建”按钮，该按钮会触发弹出窗口，并带有用户文本输入作为下面的附件。

如果它按我的预期工作，则应存储单击“确定”按钮时在文本字段中写入的名称，然后该名称应反映在如下所示的页面上，因为我键入了自己的名称“ 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>

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

Answer 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