我有这个代码的"显示代码",它将呈现代码片段与不同的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
但代码片段不会更改.