javascript - change - ¿Cómo puedo vincular el contenido html<title> en vuejs?
vue title attribute (4)
Estoy probando una demo en vuejs. Ahora quiero que el título html enlace un campo vm.
Lo que sigue es lo que intenté:
index.html
<!DOCTYPE html>
<html id="html">
<head>
<title>{{ hello }}</title>
<script src="lib/requirejs/require.min.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>
app.js
define([
''jquery'', ''vue''
], function ($, Vue) {
var vm = new Vue({
el: ''html'',
data: {
hello: ''Hello world''
}
});
});
Pero el título no parecía limitado, ¿cómo hacerlo funcionar?
Como prefiero configurar <title> desde la parte de vista, hay esencialmente dos formas de resolverlo.
Use un Componente existente
Por ejemplo, vue-headful :
Instalar
npm i vue-headfulRegistre el componente:
import Vue from ''vue''; import vueHeadful from ''vue-headful''; Vue.component(''vue-headful'', vueHeadful); new Vue({ // your configuration });Y luego use el componente vue-headful en cada una de sus vistas:
<template> <div> <vue-headful title="Title from vue-headful" description="Description from vue-headful" /> </div> </template>
Tenga en cuenta que vue-headful no solo es compatible con el título, sino también con varias metaetiquetas y el idioma del documento.
Crea tu propio Componente
Crea un archivo vue que contenga:
<script>
export default {
name: ''vue-title'',
props: [''title''],
created () {
document.title = this.title;
},
watch: {
title () {
// only used when the title changes after page load
document.title = this.title;
}
},
render () {
},
}
</script>
Registre el componente usando
import titleComponent from ''./title.component.vue'';
Vue.component(''vue-title'', titleComponent);
Entonces puedes usarlo en tus vistas, por ejemplo
<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + '' - Static''"></vue-title>
Esta respuesta es para vue 1.x
usando requirejs.
define([
''https://cdn.jsdelivr.net/vue/latest/vue.js''
], function(Vue) {
var vm = new Vue({
el: ''html'',
data: {
hello: ''Hello world''
}
});
});
<!DOCTYPE html>
<html id="html">
<head>
<title>{{ hello }}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>
Puedes hacerlo así usando la función de listo para establecer el valor inicial y mirar para actualizar cuando cambian los datos.
<html>
<head>
<title>Replace Me</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<input v-model="title">
</div>
<script>
new Vue({
el: ''#app'',
ready: function () {
document.title = this.title
},
data: {
title: ''My Title''
},
watch: {
title: function (val, old) {
document.title = val
}
}
})
</script>
</body>
</html>
También probé esto basado en tu código original y funciona
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<input v-model="title">
</div>
<script>
new Vue({
el: ''html'',
data: {
title: ''My Title''
}
})
</script>
</body>
</html>
Las etiquetas de título y meta pueden editarse y actualizarse de forma asíncrona.
Puede usar la administración del estado, crear una tienda para SEO usando vuex y actualizar cada parte en consecuencia.
O puede actualizar el elemento usted mismo fácilmente
created: function() {
ajax().then(function(data){
document.title = data.title
document.head.querySelector(''meta[name=description]'').content = data.description
})
}
Puedes hacerlo con 1 línea en el archivo App.vue, así:
<script>
export default {
name: ''app'',
created () {
document.title = "Look Ma!";
}
}
</script>
O cambie el contenido de la etiqueta <title> en public/index.html
<!DOCTYPE html>
<html>
<head>
<title>Look Ma!</title> <!- ------ Here ->
</head>
...