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>
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,
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
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" ]
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.
createdCustomer
in the form of an objectAs 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" }