I'm a beginner in Vue and I have some problem to change random text with interval 5 second when the page is loading.
<template>
<section class="container">
<h1 class="title">
Wele {{ whois }}
</h1>
</section>
<template>
<script>
export default {
data() {
return {
whois: ['Student', 'Developer', 'Programmer']
}
},
// methods: {
// randomWhois(){
// }
// },
// beforeMount() {
// this.randomWhois();
// }
}
</script>I'm a beginner in Vue and I have some problem to change random text with interval 5 second when the page is loading.
<template>
<section class="container">
<h1 class="title">
Wele {{ whois }}
</h1>
</section>
<template>
<script>
export default {
data() {
return {
whois: ['Student', 'Developer', 'Programmer']
}
},
// methods: {
// randomWhois(){
// }
// },
// beforeMount() {
// this.randomWhois();
// }
}
</script>I hope when the interval 5 seconds, my text is always changed.
Example: (always change in 5 seconds)
Wele Student
Wele Developer
Wele Programmer
Thank you very much!
Share Improve this question edited Feb 19, 2019 at 17:18 Harsha pps 2,2282 gold badges28 silver badges38 bronze badges asked Feb 19, 2019 at 16:25 Rahmat OktrifiantoRahmat Oktrifianto 4476 silver badges10 bronze badges1 Answer
Reset to default 9In mounted, set up an interval to fire your method every 5 seconds.
This method will just shift your whois array to the left.
And then in your template, change the Wele to display the first element in the array {{ whois[0] }}.
<template>
<section class="container">
<h1 class="title">
Wele {{ 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>