Vue-SweetAlert2のポップアップ内で複数のユーザーインプットを読み取り、その内のいくつかを1つのオブジェクトとして保存するには?
現在、下記コード・添付画像のような、ユーザー情報を入力してもらうポップアップを作っています。
<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>
ただ複数の項目を入力してもらう事だけなら今のコードのままでもできるのですが、「アドレス(住所)」の部分に関しては単なる「文字列」ではなく、下記コードのような複数の文字列からなる「オブジェクト型」として保存したいです。
"address": {
"street": "string",
"city": "string",
"country": "string",
"region": "string",
"zipCode": "string"
}
今の所、HTMLとpreConfirm parametersを使って入力項目をポップアップ内に表示させているのですが、上記のようなオブジェクト型でユーザーのアドレス(住所)を保存したい場合、どのようにすれば良いのでしょうか?