Позволяет ли предварительное подтверждение Vue-Sweetalert2 передать объект, состоящий из нескольких строк?

Question

В настоящее время я работаю над тренировочной веб-страницей и создаю кнопку «Создать», которая вызывает всплывающее окно, в котором вы можете указать свои личные данные, такие как ваше имя, ваш почтовый адрес и т. Д. (Показанные в виде прикрепленного изображения)

Вместо одной строки я хочу сохранить адрес пользователя в виде объекта, состоящего из нескольких строк, например

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

Но тут возникает проблема.Хотя всплывающее окно, которое я создал, работает и успешно передает пользовательские данные, при передаче данных адрес НЕ сохраняется как объект адреса.Вместо этого они представляют собой отдельные 5 строк, как показано на рисунке ниже.

Обратите внимание, что в выводе нет фигурных скобок, хотя я хочу, чтобы вывод был похож на следующий

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

Вот так должно выглядеть, если я хочу достичь того, что намерен, потому что таким образом адрес хранится в виде объекта «адрес», который состоит из 5 строк.

После изучения моего собственного кода (показанного ниже),

<template>
  <div style="padding: 2em;">
    <v-flex xs12 sm6 md3>

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

    <br />

    <p v-if="createdCustomer">Test result of createCustomer: {{ createdCustomer }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        createdCustomer: {
          customerNumber: null,
          locale: null,
          regNo: null,
          address: {
            street: null,
            city: null,
            country: null,
            region: null,
            zipCode: null
          },
          firstName: null,
          lastName: null
        }
      }
    },
    methods: {
      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);

        }   
      }
    },

  }
</script>

Я подозреваю, что проблема заключается в preConfirm метода alertDisplay, потому что он выбирает 10 отдельных значений черезdocument.getElementById и сохранить их в this.createdCustomer.

Я хочу сделать что-то вроде следующего, потому что я хочу передать «адрес» как объект, который состоит из 5 строк.

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
                ]    

            }

Но проблема в том, что это неправильный синтаксис и он вызывает ошибку компиляции.

Есть ли способ, чтобы preConfirm позволил мне передать объект "address", который я описал?Или я должен в первую очередь пересмотреть использование preConfirm и найти другой способ?