Vue.js - 棱镜代码未从计算属性中显示

Question

出于学习 Vue 的目的，我正在尝试创建一个非常简单的应用程序，它将实时从输入中返回突出显示的代码。我浏览了一些 Prism 教程和示例，但无法使其正常工作。任何帮助或指导都将不胜感激，因为我刚刚开始使用 Vue，我感觉我在混淆一些东西。

这是HelloWorld.vue：

<template>
  <div>
    <h1>Prism Demo</h1>
    <div id="editor">
      <textarea v-model="message"></textarea>
      <div>{{ highlighteddMessage }}</div>
    </div>
  </div>
</template>

<script>
import Prism from 'vue-prism-component'
export default {
  data() {
    return {
      message: `var myFunction = function() {
    statements
}`
};
  },
      computed: {
        highlighteddMessage: function () {
        return Prism.highlight(this.message, Prism.languages.js);
      }
    }
}
</script>

<style scoped>
...
</style>

还有我的main.js：

import Vue from 'vue'
import App from './App.vue'

import "prismjs";
import "prismjs/themes/prism-funky.css";
import "prismjs/components/prism-scss.min";
import "prismjs/plugins/autolinker/prism-autolinker.min";
import "prismjs/plugins/autolinker/prism-autolinker.css";
import Prism from "vue-prism-component";
Vue.component("prism", Prism);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

我认为问题在于我如何尝试在计算属性中使用 Prism，但我无法修复它。将感谢有关在 Vue 中正确使用 Prism 的任何提示。

Answer 1

您应该将Prism 添加到您的组件选项components:{Prism}，然后在模板中使用该组件包装代码，无需创建计算属性：

  <div>
    <h1>Prism Demo</h1>
    <div id="editor">
      <textarea v-model="message"></textarea>


  <prism language="javascript">{{ message  }}</prism>
    </div>
  </div>
</template>

<script>
import Prism from 'vue-prism-component'
export default {
  data() {
    return {
      message: `var myFunction = function() {
    statements
}`
};
  },
  components:{
     Prism
   }
}
</script>