Dynamisch bindenden title tag in vuejs

Question

Ich bin neu in vuejs.

Ich versuche, Daten auf dem Titel-Tag dynamisch zu binden. Ich benutzte vue-head, um dies auf einer einfachen HTML-Seite zu tun. Ich benutze kein webpack und npm.

Dies ist, wie ich den Titel-Tag binden:

var app = new Vue({ 
      el: 'html', 
      head: { 
       title: function() { 
       return { 
        inner: this.remaining + ' Tâches', 
        separator: ' ', 
        complement: ' ' 
       } 
       } 
      } 

Im vue-Kopf-Dokumentation, schlagen sie vor, dies zu tun:

methods: { 
    getAsyncData: function() { 
    var self = this 
    window.setTimeout(function() { 
    self.title = 'My async title' 
    self.$emit('updateHead') 
    }, 3000) 
    } 
}, 

ich es auch in der Uhren prop gesetzt versucht, aber es hat nicht funktioniert.

Hier ist meine gesamte Code: https://jsfiddle.net/5d70s0s6/1/

Dank

Answer 1

Verwenden Sie eine computed Eigenschaft.

computed: { 
    title: { 
    get() { 
     document.title = this.remaining 
     return this.remaining 
    }, 
    set(val) { 
     document.title = val 
    } 
    } 
} 

Sie brauchen nicht <title>{{title}}</title> zu verwenden. Wenn Sie in Ihrem Vue title ändern, wird es automatisch auf die Seite angewendet.

Außerdem sollten Sie keine Vue-Instanz an html, head oder body Tags binden. Verwenden Sie reguläre Elemente nur wie <div id="app"></div> und stellen Sie Ihre Vue el: '#app'

Oder Sie könnten so:

data: { 
    title: '', 
}, 
watch: { 
    title(val) { 
    document.title = val 
    } 
} 

Update: Während der Code über Ihr Problem lösen können. Ich schuf dieses winzigevue-title component, das in Ihrem Projekt leicht benutzt werden kann.

Beispiel:

<vue-title>{{title}}</vue-title>