Modifying the document title dynamically with Vue.js
Published on 2020-05-16 • Modified on 2020-05-16
In this snippet we will see how to alter the title element of an HTML document dynamically. It is something I use on my pomodoro.fun project where the title is updated every seconds with the time left of the countdown. In this snippet, we update the title with a random number every seconds.
/**
* I am using a JavaScript module to isolate the code of each snippet.
* In fact it's a Vue.js mixin. Take the code called by the mounted()
* or the snippetXX() function.
*/
export default {
data: {
title: 'Strangebuzz'
},
methods: {
snippet91 () {
const self = this
setInterval(function () {
self.title = Math.random() + ' | ' + self.trans.snippet_91_title
}, 1000)
}
},
watch: {
title: {
immediate: true,
handler () {
document.title = this.title
}
}
},
mounted () {
if (this.isArticle(91)) {
this.snippet91()
}
}
}
More on Stackoverflow Read the doc More on the web Random snippet
