How to properly add and remove class to element in custom directive?


I have a problem with classes when component with :class binding and custom directive is combined.

My component - simple button that just manages focus class.

Vue.component("my-button", {
  data() {
    return {
      hasFocus: false,
  methods: {
    onFocus() {
      this.hasFocus = true;
    onBlur() {
      this.hasFocus = false;
  template: `<button class="my-button" :class="{ 'has-focus': hasFocus }" @focus="onFocus" @blur="onBlur"><slot></slot></button>`

My directive - just adds class.

Vue.directive("my-directive", {
  bind(el) {
  unbind(el) {

The problem is when the hasFocus value changes, the component :class is recalculated, however it also removes the .my-directive class added by the directive, making the directive useless.

Here’s jsfiddle for more complete example:

So my question is, how to properly manage class on element via directive?
Or is this a bug of :class binding?

1 Like

Did you manage to solve this problem?

I am facing this issue as well. Would be nice to be able to specify persistent classes.

Just changing bind to update should solve the problem