Suggestions to update arbitrary content at a 5-second interval in Vue using Nuxt.js

Question

Suggestions to update arbitrary content at a 5-second interval in Vue using Nuxt.js

As a Vue beginner, I am facing an issue with changing random text every 5 seconds while the page is loading.

<template>
  <section class="container">
      <h1 class="title">
        Welcome {{ whois }}
      </h1>
</section>
<template>

<script>
export default {
  data() {
    return {
      whois: ['Student', 'Developer', 'Programmer']
    }
  },
  // methods: {
  //   randomWhois(){
      
  //   }
  // },
  // beforeMount() {
  //   this.randomWhois();
  // }
}
</script>

I am looking to have the text change every 5 seconds continuously.

Example: (text changes every 5 seconds)

Welcome Student

Welcome Developer

Welcome Programmer

Thank you for your assistance!

javascript vue.js nuxt.js

Answer 1

Answer №1

Within the mounted section, establish an interval to execute your method every 5 seconds. This method simply moves your whois array to the left. Then, in your template, update the Welcome message to show the first element in the array as {{ whois[0] }}.

<template>
  <section class="container">
      <h1 class="title">
        Welcome {{ whois[0] }}
      </h1>
    </section>
<template>

<script>
export default {
  data() {
    return {
      whois: ['Student', 'Developer', 'Programmer']
    }
  },
  mounted(){
    window.setInterval(()=>{
      this.pollPerson();
    }, 5000);

  },
  methods: {
    pollPerson(){
      const first = this.whois.shift();
      this.whois = this.whois.concat(first);
    }
  }
}
</script>

Answer 2

Within the mounted section, establish an interval to execute your method every 5 seconds. This method simply moves your whois array to the left. Then, in your template, update the Welcome message to show the first element in the array as {{ whois[0] }}.

<template>
  <section class="container">
      <h1 class="title">
        Welcome {{ whois[0] }}
      </h1>
    </section>
<template>

<script>
export default {
  data() {
    return {
      whois: ['Student', 'Developer', 'Programmer']
    }
  },
  mounted(){
    window.setInterval(()=>{
      this.pollPerson();
    }, 5000);

  },
  methods: {
    pollPerson(){
      const first = this.whois.shift();
      this.whois = this.whois.concat(first);
    }
  }
}
</script>

Suggestions to update arbitrary content at a 5-second interval in Vue using Nuxt.js

Answer №1

Similar questions

I've encountered difficulty displaying images while utilizing Vuetify in my projects

What is the best way to utilize this resulting value as an input?

Creating a Flot Bar Chart that displays non-stacking values

Tips for resolving an issue with an array and the find method?

How come my directive is being updated when there are changes in a different instance of the same directive?

What are some ways to customize the appearance of the Material UI table header?

I am experiencing issues with datejs not functioning properly on Chrome browser

Tips for determining the time and space complexity of this JavaScript code

Display the loading status while fetching data

Loading your NextJS page with a full-page loader

What steps can I take to stop the browser from refreshing a POST route in Express?

Reorganizing Vuetify elements for a unique display

Struggling to link an external JavaScript file to your HTML document?

The message "Temporary headers are displayed" appears in Chrome

Trouble with unproductive downtime in ReactJS and JavaScript

Guide to using Ajax to load a partial in Ruby on Rails

Angular Controller encounters issue with event handler functionality ceasing

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

Issue encountered while transferring data for populating table content with Material-ui

Show or conceal a class