I'm struggling with displaying the innerText generated by my generatePseudonym() function in a modal dialog. To better illustrate, here is a screenshot of what I mean: https://i.sstatic.net/pEl5P.png I am aiming to show the output Anastasia Shah as the Hello String when I click the generate pseudonym button. I have attempted using the mustache syntax {{ logPseudonym() }}, but unfortunately, it is not producing the desired outcome. Below is my code:
<v-dialog transition="dialog-top-transition" max-width="600">
<template v-slot:activator="{ on, attrs }">
<v-btn
@click="logPseudonym()"
width="220"
color="#80B923"
class="white--text"
v-bind="attrs"
v-on="on"
>Generate Pseudonym</v-btn
>
</template>
<template v-slot:default="dialog">
<v-card>
<v-toolbar color="#80B923" dark>Your Pseudonym</v-toolbar>
<v-card-text>
//text should be ender in here
<span class="text-h3 pa-12">
{{ logPseudonym() }}
</span>
//text should be render in here
</v-card-text>
<v-card-actions class="justify-end">
<v-btn text @click="dialog.value = false">Close</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
export default {
methods: {
//fetching the data from API
async getAPIData(url) {
try {
const res = await fetch(url);
if (!res.ok) {
throw new Error("The network is not connected");
}
return res.json();
} catch (err) {
console.error("Failed to fetch the data:", err);
}
},
//
getAPINames(genderType) {
return this.getAPIData(
`https://localhost:3000/data/names-${genderType}.json`
);
},
randomNameGenerator(names) {
return names[Math.floor(Math.random() * names.length)];
},
async generatePseudonym(gender) {
try {
const res = await Promise.all([
this.getAPINames(
gender || this.randomNameGenerator(["male", "female"])
),
this.getAPINames("surnames")
]);
const [firstNames, lastNames] = res;
const firstName = this.randomNameGenerator(firstNames.data);
const lastName = this.randomNameGenerator(lastNames.data);
return `${firstName} ${lastName}`;
} catch (error) {
console.error("Unable to generate name:", error);
}
},
logPseudonym(gender) {
this.generatePseudonym(gender).then(console.log);
}
}
};
</script>