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>