typescript - 如何在 Vue 3 中将 Markdown 字符串转换为普通 HTML(选项 API 方法)

Question

我是一名后端开发人员，正在尝试涉足 vuejs。

我正在尝试编写一个前端，它联系 OpenAI API 并返回来自 GPT-4 的响应。这工作得很好，但 GPT-4 也以 markdown 形式返回响应。

我不知道如何在我的具体情况下做到这一点。

我尝试使用以下 npm 包:https://www.npmjs.com/package/vue-markdown在我的代码中使用它后，我得到以下结果(请不要评判设计😅):screenshot of result with the vue-markdown npm package

这是我在 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>

Answer 1

您需要循环遍历每条消息的内容并将其呈现在 Markdown 中，如下所示:

<div v-for="message in chatHistory" :key="message.content">
    <vue-markdown :source="message.content"></vue-markdown>
</div>