How to get InnerText on VUEJS

Question

I'm having issues with rendering innerText from my generatePseudonym() function into modal dialog, here's pict what I mean I want to print the output Anastasia Shah into Hello String when I click generate pseudonym button, I already tried the mustache syntax {{ logPseudonym() }} but it's not working, here's 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>

Answer 1

You need to define a data variable logPseudonym , assign this variable in logPseudonym() and use it in mustache syntax as {{this.logPseudonym}} .

If you use function directly in mustache, you regenerate a new name after render so click event will not have any effect.

data() {
    return {
         logPseudonym: ""
    }
}

logPseudonym(gender) {
    this.generatePseudonym(gender).then((val) => { this.logPseudonym = val;});
}