Skip to content

[Bug Report]: cssPath is not reactive #49

Closed
@kymtwyf

Description

@kymtwyf

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

Metadata

Metadata

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions