如何使用Vue-SweetAlert2在单个弹出窗口中传递多个用户输入并更新数据

Question

I know how to ask a user for his or her user name by a popup with Vue-SweetAlert2.

<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 = await this.$swal({
                          title: 'What is your Name?',
                          input: 'text',
                          inputPlaceholder: 'Enter your name here',
                          showCloseButton: true,       
                        });
        console.log(customer);
        this.createdCustomer = customer; 
      }
    }
  }
</script>

With code like the one above, you can store whatever the user typed into createdCustomer, and it should be displayed on the screen after the user gives the input.

But what if I wanted to ask the user for multiple pieces of information? For example, how do I ask for info like

• "customerNumber" (also want to make sure that alphabets and numbers are combined)
• "locale" (also want to make sure that the input is a collection of choices that the user chooses from, like drop down menu, rather than a text field where you can type in whatever you like)
• "firstName" (also want to make sure that the name doesn't exceed 255 characters)

etc.

in a single popup?

I tried to set multiple input fields like below, but I got a warning "Unknown parameter", and this doesn't seem to be a valid way.

var customer = await this.$swal({
                          title: 'Fill in your personal data',
                          input1: 'text',
                          input2: 'text',
                          input3: 'text',
                          inputPlaceholder: 'Enter your name here',
                          showCloseButton: true,       
                        });

And how do I check if the user has given a valid input (like the name is within 255 characters, both of alphabets and numbers are used etc)? If I were using C or Java, I could imagine using if-statements like

if(length <= 255){
    // proceed
} else {
    // warn the user that the input is too long
}

somewhere in the code, but in this case I don't know how I can do a similar if-statement like thing within the popup...

[ADDITIONAL QUESTION]

Is it also possible to pass an object that consists of multiple smaller elements, like "address"?

"address": {
    "street": "string",
    "city": "string",
    "country": "USA",
    "region": "string",
    "zipCode": "string"
}

Answer 1

As per the documentation :

Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters. Inside the preConfirm() function you can return (or, if async, resolve with) the custom result:

const {value: formValues} = await Swal.fire({
    title: 'Multiple inputs',
    html: '<input id="swal-input1" class="swal2-input">' +
        '<input id="swal-input2" class="swal2-input">',
    focusConfirm: false,
    preConfirm: () => {
        return [
            document.getElementById('swal-input1').value,
            document.getElementById('swal-input2').value
        ]
    }
})
if (formValues) {
    Swal.fire(JSON.stringify(formValues))
}

https://sweetalert2.github.io/

For validation you have to use the inputValidor prop like this :

const {value: ipAddress} = await Swal.fire({
    title: 'Enter your IP address',
    input: 'text',
    inputValue: inputValue,
    showCancelButton: true,
    inputValidator: (value) => {
        if (!value) {
            return 'You need to write something!'
        }
    }
})

if (ipAddress) {
  Swal.fire(`Your IP address is ${ipAddress}`)
}