英文:
How can I convert Markdown string to normal HTML in Vue 3 (Options API approach)
问题
我是一名后端开发人员，正在尝试学习Vue.js。我正在编写一个前端应用程序，该应用程序与OpenAI API进行通信，并从GPT-4获取响应。这部分工作非常完美，但是GPT-4返回的响应是用Markdown格式的。
我无法找到如何在我的特定情况下处理这个问题。
我尝试使用以下npm包：https://www.npmjs.com/package/vue-markdown
在我的代码中使用这个包后，我得到了以下结果（请不要评判设计）：使用vue-markdown npm包的结果截图
这是我在Chat.vue文件中编写的代码：
<script lang="ts">import { GPTMessage } from '../types/GPTMessage';import { ChatAPI } from '../lib/gpt';import VueMarkdown from 'vue-markdown-render';export default {data() {return {chatHistory: [] as GPTMessage[],input: "" as string}},components: {VueMarkdown},methods: {async askGpt(): Promise<void> {this.chatHistory.push({ role: "user", content: this.input })this.input = ""const resp = await ChatAPI(this.chatHistory)this.chatHistory.push({ role: resp.role, content: resp.content })},handleChange(event: any) {this.input = event.target.value}}}</script><template><div class="flex flex-col h-screen justify-between mb-auto"><div class="mb-auto"><vue-markdown v-for="message in chatHistory">{{ message.content }}</vue-markdown></div><div class="flex mt-5"><button @click="askGpt">Chat</button><input type="text" class="bg-red-500 w-full" @change="handleChange" :value="input" /></div></div></template>
英文:
I am a backend developer and trying to get a foot onto vuejs.
I am trying to write a frontend, which contacts the OpenAI API and gives back reponses from GPT-4.
This works perfectly fine, but GPT-4 also returns reponses in markdown.
I cannot find out how to do that in my specific case.
I tried to use the following npm package: https://www.npmjs.com/package/vue-markdown
After using this in my code, I get the following (Please don't judge the design 😅): screenshot of result with the vue-markdown npm package
Here is the code I wrote in my Chat.vue file:
<script lang="ts">import { GPTMessage } from '../types/GPTMessage';import { ChatAPI } from '../lib/gpt';import VueMarkdown from 'vue-markdown-render'export default {data() {return {chatHistory: [] as GPTMessage[],input: "" as string}},components: {VueMarkdown},methods: {async askGpt(): Promise<void> {this.chatHistory.push({ role: "user", content: this.input })this.input = ""const resp = await ChatAPI(this.chatHistory)this.chatHistory.push({ role: resp.role, content: resp.content })},handleChange(event: any) {this.input = event.target.value}}}</script><template><div class="flex flex-col h-screen justify-between mb-auto"><div class="mb-auto"><vue-markdown v-for="message in chatHistory">{{ message.content }}</vue-markdown></div><div class="flex mt-5"><button @click="askGpt">Chat</button><input type="text" class="bg-red-500 w-full" @change="handleChange" :value="input" /></div></div></template>
答案1
得分: 0
你需要循环遍历每条带有内容的消息，并以以下方式在 Markdown 中呈现：
<div v-for="message in chatHistory" :key="message.content"><vue-markdown :source="message.content"></vue-markdown></div>
英文:
you need to loop through each message with the content and render it in the markdown like so :
<div v-for="message in chatHistory" :key="message.content"><vue-markdown :source="message.content"></vue-markdown></div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论