我有这个代码的"显示代码",它将呈现代码片段与不同的props 基于用户 Select 的语言上的代 docker (工作良好). image here

<template>
    <div>
        <CodeHeader @language-selected="onLanguageSelected" />
        <CodeSnippet :language="selectedLanguage" :code="getCodeForLanguage(selectedLanguage)" />
        {{ selectedLanguage }} // WORKS
        {{ getCodeForLanguage(selectedLanguage)}} //WORKS

    </div>
</template>
            
<script>
import CodeSnippet from '@/components/atoms/CodeSnippet.vue';
import CodeHeader from '@/components/cells/CodeHeader.vue';

export default {
    name: 'ShowCode',
    components: {
        CodeSnippet,
        CodeHeader
    },
    data() {
        return {
            selectedLanguage: 'html', 
        };
    },
    methods: {
        onLanguageSelected(language) {
            language = language.toLowerCase();
            this.selectedLanguage = language;
        },
        getCodeForLanguage(language) {
            switch (language) {
                case 'html':
                    return '<h1>Oi</h1>';
                case 'css':
                    return '.h1 {}';
                case 'js':
                    return 'console.log(h1);';
                default:
                    return '';
            }
        },
    },
};
</script>

下面是我的代码片段:

<template>
    <div class="code-snippet">
      <pre>
        <vue-prism-component :code="code" :language="language"> {{ code }} {{ language }}</vue-prism-component>
      </pre>
    </div>
  </template>
  
  <script>
  import VuePrismComponent from 'vue-prism-component';
  import 'prismjs/themes/prism.css';
  
  export default {
    name: 'CodeSnippet',
    components: {
      VuePrismComponent
    },
    props: {
      code: {
        type: String,
            default: 
            `<h1>Oops! No code found.</h1>\n <p>Sad :(</p>`
            
      },
      language: {
        type: String,
            default: 'html'
      }
    }
  };
  </script>

在代码上,您可以看到这些工作:

{{seltedLanguage}}//Works {{getCodeForLanguage(SeltedLanguage)}}//Works

但代码片段不会更改.

推荐答案

你的代码是完全有效的,所以我go 查了.

看一下vue-prism-component的源代码,我看到props are read into regular variable在呈现函数中使用时应该会扼杀它们的react 性或不断变化的机会,因为setup每个组件只运行一次.

事实上,这方面有Github issue分.

如果可以的话,我建议将评级降到^1.0.0,直到它被修复.

Vue.js相关问答推荐

如何使用 vueJS 上的 ref( ) 函数创建二维数组定义?

Nuxt3: 安装vue3-spinner (error: require is not defined in ES module scope)

如何 for each 用户分组聊天消息?

Defer推迟执行,直到外部脚本加载到 Vue.js

使用 Vue.js 和 Jest 进行 URL 重定向测试

我可以从手表调用方法并安装吗?

如何渲染数组以 Select 选项 vue.js

Vue-router:循环路由以动态创建

VueJS + VueRouter:有条件地禁用路由

React.js 是否有类似 Vue.js

如何使用 vuex 删除项目?

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

Vue路由保持活动和挂载行为

Jest错误找不到模块....

Vue 组件中的组件渲染函数中可能存在无限更新循环警告

npm run dev 和 npm run production 的区别

有没有办法知道组件实例何时挂载?

按键删除对象不会更新vue组件

如何设置 :id 前缀字符串?

在 Vuex 模块中进行继承的方法