javascript - 如何使用 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

您必须使用承诺来获取 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