[Vuejs]-Change innerHTML every 5 seconds using Vue.js

by

4👍

✅

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.

👤karavanjo

1👍

For those that just want to loop through the words.

<div>{{words[i}}</div>

 data() {
    return {
      words: ["jacket", "umbrella", "sunscreen", "sunglasses", "air cooler"],
      i: 0
    }
  },
  mounted() {
    setInterval(() => {
      if (this.i < this.words.length-1) this.i++
      else this.i = 0
    },5000)
  }
👤Matt

Leave a comment