javascript - vuejs中动态绑定(bind)title标签

Question

我是 vuejs 的新手。

我尝试动态绑定(bind)标题标签上的数据。我使用 vue-head 在一个简单的 html 页面上执行此操作。我不使用 webpack 和 npm。

这是我绑定(bind)标题标签的方式:

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

在 vue-head 文档中，他们建议这样做:

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

我也试过在 watch prop 里面设置，但是没有成功。

这是我的全部代码:https://jsfiddle.net/5d70s0s6/1/

谢谢

Answer 1

使用 computed属性(property)。

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

您不需要使用 <title>{{title}}</title> .如果你改变 title在你的 Vue 中，它将自动应用到页面。

此外，您不应该将 Vue 实例绑定(bind)到 html , head或 body标签。仅使用常规元素，如 <div id="app"></div>并设置你的 Vue el: '#app'

或者你可以使用这个:

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

更新:虽然上面的代码可以解决您的问题。我创造了这个微型 vue-title component可以很容易地在您的项目中使用。

例子:

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