Search code examples
vue.jssweetalert2

How to pass an object input and update the data in a single popup using Vue-SweetAlert2


I'm currently trying to make a popup in which a user is supposed to fill in his or her personal information, as shown in the following code and the attached image.

<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() {
        const {value: formValues} = await this.$swal.fire({
            title: 'Create private customer',
            html: '<input id="swal-input1" class="swal2-input" placeholder="Customer Number">' +
                '<select id="swal-input2" class="swal2-input"> <option value="fi_FI">fi_FI</option> <option value="sv_SE">sv_SE</option> </select>'
                 + 
                '<input id="swal-input3" class="swal2-input" placeholder="regNo">' +
                '<input id="swal-input4" class="swal2-input" placeholder="Address">' +
                '<input id="swal-input5" class="swal2-input" placeholder="First Name">' +
                '<input id="swal-input6" class="swal2-input" placeholder="Last Name">'
                ,
            focusConfirm: false,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value,
                    document.getElementById('swal-input3').value,
                    document.getElementById('swal-input4').value,
                    document.getElementById('swal-input5').value,
                    document.getElementById('swal-input6').value
                ]
            }
        })
        if (formValues) {
            this.createdCustomer = this.$swal.fire(JSON.stringify(formValues));
            console.log(this.createdCustomer);
        }   
      }
    }
  }
</script>

multiple inputs

This way, I can let the user fill in multiple fields, but I want to store the "Address" in the form of an Object, not just a string.

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

I managed to change one of the 6 inputs to a "select" type instead of "input" type which just lets users write some text, but when it comes to an object type that consists of multiple strings like above, I don't know how to do it when I need to use HTML and preConfirm parameters.

How can I do it? Is it even possible to store an "address" as an object in the first place?

[UPDATED]

What I'm trying to do is to let the user fill in each of "street", "city", "country", "region", "zipCode" individually, shown as the attached image below,

enter image description here

and store them as an "address" object like the code below

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

[UPDATED (Version2]

v-model not working

async alertDisplay() {

        const {value: formValues} = await this.$swal.fire({
            title: 'Create private customer',
            html: '<input id="swal-input1" class="swal2-input" placeholder="Customer Number">' +
                '<select id="swal-input2" class="swal2-input"> <option value="fi_FI">fi_FI</option> <option value="sv_SE">sv_SE</option> </select>'
                 + 
                '<input id="swal-input3" class="swal2-input" placeholder="regNo">' +
                '<input v-model="createdCustomer.address.street" id="swal-input4" class="swal2-input" placeholder="Address (street)">' +
                '<input v-model="createdCustomer.address.city" id="swal-input5" class="swal2-input" placeholder="Address (city)">' +
                '<input v-model="createdCustomer.address.country" id="swal-input6" class="swal2-input" placeholder="Address (country)">' +
                '<input v-model="createdCustomer.address.region" id="swal-input7" class="swal2-input" placeholder="Address (region)">' +
                '<input v-model="createdCustomer.address.zipCode" id="swal-input8" class="swal2-input" placeholder="Address (zipCode)">' +
                '<input id="swal-input9" class="swal2-input" placeholder="First Name">' +
                '<input id="swal-input10" class="swal2-input" placeholder="Last Name">'
                ,
            focusConfirm: false,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value,
                    document.getElementById('swal-input3').value,
                    document.getElementById('swal-input4').value,
                    document.getElementById('swal-input5').value,
                    document.getElementById('swal-input6').value,
                    document.getElementById('swal-input7').value,
                    document.getElementById('swal-input8').value,
                    document.getElementById('swal-input9').value,
                    document.getElementById('swal-input10').value
                ]    

            }
        })
        if (formValues) {
            this.createdCustomer = formValues;
            console.log('the content of this.createdCustomer');
            console.log(this.createdCustomer);
            console.log('the content of this.createdCustomer.address');
            console.log(this.createdCustomer.address);
        }   
      }

The output

enter image description here

But I want it to be like

Test result of createCustomer: [ "JS1", "fi_FI", "123ABC", {"stackoverflow st 12", "San Francisco", "USA", "California", "12345"}, "Shinichi", "Takagi" ]

Solution

  • I managed to find a solution to this problem, so I will post an answer on my own.

    The root of the problem turned out to be the single line this.createdCustomer = formValues; in the part

    if (formValues) {
                this.createdCustomer = formValues;
                console.log('the content of this.createdCustomer');
                console.log(this.createdCustomer);
                console.log('the content of this.createdCustomer.address');
                console.log(this.createdCustomer.address);
            }   
    

    of my original question post.

    Because the user inputs were stored as 10 individual primitive data type inputs instead of an object form "address" that contains multiple strings, it was an array of strings that was assigned to this.createdCustomer from formValues.

    In order to solve this problem, I did the following two things.

    1. Declare createdCustomer in the form of an object
    2. Assign each value of formValues one by one, by referring to its index numbers ( ← this is what I didn't realize for so long)

    As for the first point, I declared the createdCustomer as the following.

    data() {
          return {
            createdCustomer: {
              customerNumber: null,
              locale: null,
              regNo: null,
              address: {
                street: null,
                city: null,
                country: null,
                region: null,
                zipCode: null
              },
              firstName: null,
              lastName: null
            }
          }
        },
    

    And regarding the second point, I referred to formValues's indexes one by one like this.

    if (formValues) {
                //this.createdCustomer = formValues;   // this one line overwrote the entire createdCustomer object, which was the root of the problem
                this.createdCustomer.customerNumber = formValues[0];
                this.createdCustomer.locale = formValues[1];
                this.createdCustomer.regNo = formValues[2];
                this.createdCustomer.address.street = formValues[3];
                this.createdCustomer.address.city = formValues[4];
                this.createdCustomer.address.country = formValues[5];
                this.createdCustomer.address.region = formValues[6];
                this.createdCustomer.address.zipCode = formValues[7];
                this.createdCustomer.firstName = formValues[8];
                this.createdCustomer.lastName = formValues[9];
    
                console.log('the content of this.createdCustomer.address');
                console.log(this.createdCustomer.address);
    
                console.log('the content of this.createdCustomer.address.street');
                console.log(this.createdCustomer.address.street);
    
            }   
    

    And now that the "address" is passed on in the form of an "address" object, and the output is just as expected.

    Test result of createCustomer: { "customerNumber": "JS1", "locale": "fi_FI", "regNo": "123ABC", "address": { "street": "stackoverflow st 12", "city": "San Francisco", "country": "USA", "region": "California", "zipCode": "12345" }, "firstName": "Shinichi", "lastName": "Takagi" }
    

    successful