Modification dynamique du titre du document avec Vue.js

Publié le 16/05/2020 • Actualisé le 16/05/2020

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

  Travaillez avec moi !

---