How do I read multiple user inputs in the Vue-SweetAlert2 pop-up and save some of them as one object?

Currently, we are creating a pop-up where you can enter user information such as the code below and the attached image.

<template>
      <v-btn class="create-button" color="yellow"@click="alertDisplay">Create</v-btn>

    <br of >

    <p>Test result of createCustomer: {{createdCustomer}}</p>
  </div>
</template>

<script>
  export default {
    data(){
      US>return{
        createdCustomer:null
      }
    },
    methods: {
      async alertDisplay() {

        const {value:formValues} = wait 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</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);
        }   
      }
  }
</script>

"However, if you only enter more than one item, you can keep the current code, but I would like to save the ""address"" part as ""object type"" consisting of more than one string, such as the code below."

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

For now, I'm using HTML and preConfirm parameters to display the input items in the pop-up, but what should I do if I want to save the user's address (address) with the above object type?

vue.js

2022-09-30 11:36

1 Answers

It's been resolved, so I'll add it as a memorandum.

The problem was

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);
        }

this.createdCustomer=formValues; in .
Because of this line, the data was stored as 10 separate inputs, and the address portion of the formValues content was stored in this.createdCustomer as an array of string types, not object types.

There are two things we have done to resolve this:

For 1, we declared createdCustomer as follows:

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

For 2, we looked at the indexes one by one as follows:

if(formValues){
            // this.createdCustomer=formValues; // this one line override 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);

        }

As a result, the address was properly saved as an "address object type" and the output was as expected.

Test result of createCustomer: {"customerNumber": "JS1", "locale": "fi_FI", "regNo": "123ABC", "address": {"street": "stackoverflowst12", "city": "San Francisco", "country": "USA", "regCircion": 123"

2022-09-30 11:36

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656