Modification dynamique du titre du document avec Vue.js

Publié le 16/05/2020 • Mis à jour le 16/05/2020


English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧 Close

Dans ce bout de code nous allons voir comment modifier le titre d'un document HTML dynamiquement. C'est quelque chose que j'utilise dans mon projet pomodoro.fun ou le titre est mis à jour toutes les secondes avec le temps restant avant la fin du décompte. Dans ce snippet, nous modifions le titre de la page toutes les secondes avec un nombre aléatoire.


/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
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()
    }
  }
}

 Plus sur Stackoverflow   Lire la doc  Plus sur le web  Snippet aléatoire