如何在 VUEJS 上获取 InnerText

Question

我在将 generatePseudonym() 函数中的 innerText 渲染到模态对话框时遇到问题，这就是我的意思我想在单击生成假名按钮时将输出 Anastasia Shah 打印到 Hello 字符串中，我已经尝试过小胡子语法 {{ logPseudonym() }} 但是它不工作，这是我的代码

<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

您需要定义一个数据变量 logPseudonym，在 logPseudonym() 中分配此变量并在 mustache 语法中将其用作 {{this.logPseudonym}}.

如果直接在 mustache 中使用函数，渲染后会重新生成一个新名称，因此点击事件不会有任何效果。

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

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

如何在 VUEJS 上获取 InnerText

How to get InnerText on VUEJS

javascript

vue.js

dom

innertext