Closed
Description
Vue Code Block Version
2.3.2
Vue Version
3.4.31
Bug description
the cssPath
property is not reactive, changing the value would not trigger reloading of the theme
Steps to reproduce
Example code:
<script setup lang="ts">
import { VCodeBlock } from '@wdns/vue-code-block';
import { ref, watchEffect } from 'vue';
const code = `const foo = 'bar';`
const theme = ref<string>("github")
const cssPath = ref<string | undefined>()
watchEffect(() => {
if (theme.value === "github") {
cssPath.value = "css/github.min.css"
} else if (theme.value === "github-dark") {
cssPath.value = "css/github-dark.min.css"
} else {
cssPath.value = undefined
}
})
</script>
<template>
<v-app>
<v-main>
<v-container>
<p>Selected Theme: {{ theme }}</p>
<p>CSS Path: {{ cssPath }}</p>
<v-radio-group v-model="theme">
<v-radio label="Github" value="github"></v-radio>
<v-radio label="Github Dark" value="github-dark"></v-radio>
</v-radio-group>
<VCodeBlock highlightjs :code="code" :theme="theme" :cssPath="cssPath">
</VCodeBlock>
</v-container></v-main></v-app>
</template>
<style scoped></style>
Relevant log output
No response
Additional context
No response
Code of Conduct
- I agree to follow this project's Code of Conduct