

現在、下記コード・添付画像のような、ユーザー情報を入力してもらうポップアップを作っています。

[code]

    <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: {
          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>
    
    
[/code]

[![multiple
inputs](https://i.stack.imgur.com/8cM4R.png)](https://i.stack.imgur.com/8cM4R.png)

ただ複数の項目を入力してもらう事だけなら今のコードのままでもできるのですが、「アドレス（住所）」の部分に関しては単なる「文字列」ではなく、下記コードのような複数の文字列からなる「オブジェクト型」として保存したいです。

[code]

    "address": {
        "street": "string",
        "city": "string",
        "country": "string",
        "region": "string",
        "zipCode": "string"
    }
    
[/code]

今の所、HTMLとpreConfirm
parametersを使って入力項目をポップアップ内に表示させているのですが、上記のようなオブジェクト型でユーザーのアドレス（住所）を保存したい場合、どのようにすれば良いのでしょうか？


CC BY-SA 4.0
2019-07-02T10:26:20.940
56322
2022-12-18T06:01:25.140
2019-07-03T12:50:44.350
34951
34951
question
vue.js
Vue-SweetAlert2のポップアップ内で複数のユーザーインプットを読み取り、その内のいくつかを1つのオブジェクトとして保存するには？


一応解決したので、備忘録も兼ねて追記しておきます。

問題だったのは、

[code]

    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);
            }   
    
[/code]

の`this.createdCustomer = formValues;`という部分でした。  
この1行のせいで、データが10個の個別のインプットとして保存され、`formValues`の中身のaddressの部分がオブジェクト型ではなく単なる文字列型の配列として`this.createdCustomer`に格納されてしまっていました。

これを解決するために行ったことは以下の2つです。

  1. `createdCustomer`をオブジェクト型で宣言する事
  2. `formValues`のインデックスを1つずつ参照して値を`this.createdCustomer`に渡す事（ ** _←これに全然気づきませんでした_** ）

1に関しては、`createdCustomer`を次のように宣言しました。

[code]

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

2に関しては、次のようにインデックスを1つずつ参照しました。

[code]

    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);
    
            }   
    
[/code]

その結果、アドレスがちゃんと「アドレスオブジェクト型」で保存され、出力結果も期待した通りとなりました。

[code]

    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" }
    
[/code]

[![Successful](https://i.stack.imgur.com/fJ4O7.png)](https://i.stack.imgur.com/fJ4O7.png)


CC BY-SA 4.0
2019-07-03T13:04:45.843
56357
2019-07-03T13:14:59.817
2019-07-03T13:14:59.817
34951
34951
56322
answer