mlturner88 / vue-simple-bem Goto Github PK

I'm using v-bem on a router-link component from the Vue Router.

<router-link v-bem:link to="/demo">Top</router-link>

When the link is clicked, the v-bem class disappears. It's because router link is also adding/removing classes.

Maybe we can tie into other directive lifecycle hooks to keep the DOM classes in sync.

It seems there's a space in front of the appended class in the generated markup.

I'm not sure if this is a bug.

Great utility, so easy to use, thank you! But I found a possible issue—or something I did not understand…

I made this simple Vue 3 component (ReponsiveLayout.vue) :

<template>
  <div v-bem="`${props.columns}`">
    <slot />
  </div>
</template>

<script setup lang="ts">
interface Props {
  columns?: number
}
const props = withDefaults(defineProps<Props>(), {
  columns: 3
})
...
</script>

<script lang="ts">
// Required for vue-simple-bem (cannot infer block-level class without explicite declaration)
export default {
  name: 'ResponsiveLayout'
}
</script>

Using this component without any property set, I expected the <div> element to have two classes: responsive-layout responsive-layout--3

Instead I got: responsive-layout responsive-layout--0 (???)

I also tried this solution:

<template>
  <div v-bem="`cols-${props.columns}`">
    <slot />
  </div>
</template>
// (no changes below this line)

The expected result was: responsive-layout responsive-layout--cols-3

But I got: responsive-layout responsive-layout--0 responsive-layout--1 responsive-layout--2 responsive-layout--3 responsive-layout--4 responsive-layout--5 (???)

What am I doing wrong ? Or is it a real issue ?

vue-simple-bem@latest (2.0.0)