Vue Watch for class change

Question

I would like to listen for a class change. If the button got "fully-in-viewport" then to trigger click. $( "button.in-viewport.fully-in-viewport" ).trigger( "click" ); Found for many other options but nothing with on class change. Any suggestions, please?

Answer 1

You could use a MutationObserver to observe class changes, and react according to the new class value:

1. Add a ref to the element to observe:

   <button ref="myButton">foo</button>
   

2. Create a method to handle observed changes:

   methods: {
     onClassChange(classAttrValue) {
       const classList = classAttrValue.split(' ');
       if (classList.includes('fully-in-viewport')) {
         console.log('has fully-in-viewport');
       }
     }
   }
   

3. Create a MutationObserver that observes changes to the class attribute of the ref element, which will call the method defined above:

   mounted() {
     this.observer = new MutationObserver(mutations => {
       for (const m of mutations) {
         const newValue = m.target.getAttribute(m.attributeName);
         this.$nextTick(() => {
           this.onClassChange(newValue, m.oldValue);
         });
       }
     });
   
     this.observer.observe(this.$refs.myButton, {
       attributes: true,
       attributeOldValue : true,
       attributeFilter: ['class'],
     });
   },
   beforeDestroy() {
     this.observer.disconnect();
   }, 
   

Vue.component('foo', {
  template: `<button ref="myButton" class="foo" @click="onClick">foo</button>`,
  mounted() {
    this.observer = new MutationObserver(mutations => {
      for (const m of mutations) {
        const newValue = m.target.getAttribute(m.attributeName);
        this.$nextTick(() => {
          this.onClassChange(newValue, m.oldValue);
        });
      }
    });

    this.observer.observe(this.$refs.myButton, {
      attributes: true,
      attributeOldValue : true,
      attributeFilter: ['class'],
    });
  },
  beforeDestroy() {
    this.observer.disconnect();
  },
  methods: {
    onClassChange(classAttrValue) {
      const classList = classAttrValue.split(' ');
      if (classList.includes('fully-in-viewport')) {
        this.$refs.myButton.click();
      }
    },
    onClick() {
      requestIdleCallback(() => {
        alert('foo clicked');
      });
    }
  }
});

new Vue({
  el: '#app',
  data: () => ({
    active: false
  }),
})

.foo {
  margin: 20px;
}

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <div>
    <label>
      <input type="checkbox" @change="active = !active">
      <code>.fully-in-viewport</code> class
    </label>
  </div>
  <foo :class="{'fully-in-viewport': active}"></foo>
</div>