英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论