Home » Javascript » Change class for a VueJS component

Change class for a VueJS component

Posted by: admin June 30, 2018 Leave a comment

Questions:

I want to change the class of a component in VueJS after 2.5 seconds and I’m using this code:

const Header = {
  template: `<header :class=hclass v-html="header"></header>`,
  data () {
   return {
     hclass: 'off'
   }
  },
  methods: {
    changeVisibility () {
      window.setTimeout(function () {
        this.hclass = 'on'
        console.log('Change to on!', this.hclass)
      }, 2500)
    }
  },
  computed: {
    header () {
      this.changeVisibility()
      return store.state.header
    }
  }
}

While I see it in the console it says ‘Change to on!’, it never actually updates my class with ‘on’!

Answers: