Change innerHTML every 5 seconds using Vue.js

Issue

I am creating a simple website and I want to change the header's blank fill with random word every 5 seconds.

Here is the boilerplate to start

const header = document.querySelector('.header')
const needs = ['jacket', 'umbrella', 'sunscreen', 'sunglasses', 'air cooler']

What basically I want to achieve is to set one word of the needs as text of the .header element every % seconds, totally random. I want it to create it with Vue.js and not vue-cli beacuse the setInterval makes the page lag like hell. Please help me because I have no Idea how to do this. How can I implement something like this in Vue:

   setInterval(()=>{
   header.innerHTML = needs[Math.floor(Math.random()*6)]
}, 5000)

Solution

Simple component for your requirement would look like this:

<template>
  <div class="header">{{ word }}</div>
</template>

<script>
const words = ["jacket", "umbrella", "sunscreen", "sunglasses", "air cooler"];

export default {
  name: "HelloWorld",

  data: function() {
    return {
      word: ""
    };
  },

  methods: {
    updateWord: function() {
      this.word = words[Math.floor(Math.random() * words.length)];
    }
  },

  mounted: function() {
    this.updateWord();
    setInterval(this.updateWord, 5000);
  }
};
</script>

Working example here.
And take a look at the Vue documentation at here, please.

Answered By - karavanjo