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

Question

我目前正在尝试使一个“创建”按钮，触发弹出与用户文本输入作为下面的附加图像。

​

​

如果它像我想要的那样工作，它应该存储当点击OK按钮时写在文本字段中的名字，然后这个名字应该像下面这样反映在页面上，因为我输入了我自己的名字'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

您必须使用promises来获取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)
}

您可以在文档中的以下代码中看到它：https://codepen.io/pen/?&editable=true