I'm currently working on creating a "create" button that will prompt a popup with a text input field for the user, similar to the image below.
https://i.sstatic.net/eP7ki.png
The expected behavior is that when the OK button is clicked, the name entered in the text field should be stored and displayed on the page like this:
Test result of createCustomer: Shinichi
However, what I am currently experiencing is that instead of displaying the entered name as intended, it is showing an Object that is hardcoded within the alertDisplay() method in the code snippet below.
Test result of createCustomer: { "params": { "title": "What is your Name?", "input": "text", "inputPlaceholder": "Enter your name here", "showCloseButton": true } }
https://i.sstatic.net/yClsU.png
<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() {
var customer = this.$swal({
title: 'What is your Name?',
input: 'text',
inputPlaceholder: 'Enter your name here',
showCloseButton: true,
});
console.log(customer);
this.createdCustomer = customer;
}
}
}
</script>
I am seeking assistance on how to properly pass and display the entered name on the screen rather than seeing the Object output shown in the image.