Soy nuevo en vuejs.
Intento vincular datos en la etiqueta del título de forma dinámica. Usé vue-head para hacer esto en una página html simple. No uso webpack y npm.
Así es como enlazo la etiqueta del título:
var app = new Vue({
el: 'html',
head: {
title: function () {
return {
inner: this.remaining + ' Tâches',
separator: ' ',
complement: ' '
}
}
}
En la documentación de vue-head, sugieren hacer esto:
methods: {
getAsyncData: function () {
var self = this
window.setTimeout(function () {
self.title = 'My async title'
self.$emit('updateHead')
}, 3000)
}
},
También intenté colocarlo en el accesorio del reloj, pero no funcionó.
Aquí está mi código completo: https://jsfiddle.net/5d70s0s6/1/
Gracias
Utilice una computedpropiedad.
computed: {
title: {
get() {
document.title = this.remaining
return this.remaining
},
set(val) {
document.title = val
}
}
}
No es necesario utilizar <title>{{title}}</title>. Si cambia titleen su Vue, se aplicará automáticamente a la página.
Además, no se debería obligar a una instancia de Vue html, heado bodylas etiquetas. Use elementos regulares solo como <div id="app"></div>y configure su Vueel: '#app'
O podrías usar esto:
data: {
title: '',
},
watch: {
title(val) {
document.title = val
}
}
Actualización: si bien el código anterior puede resolver su problema. Creé este pequeño componente vue-title que se puede usar en su proyecto fácilmente.
Ejemplo:
<vue-title>{{title}}</vue-title>
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras