Question

我是vuejs的新手。

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

这就是我绑定标题标签的方式：

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)
  }
},

我也尝试在手表道具中设置它，但它没有用。

以下是我的完整代码：https://jsfiddle.net/5d70s0s6/1/

由于

Answer 1

使用computed属性。

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

您无需使用<title>{{title}}</title>。如果您在Vue中更改title，它将自动应用于该页面。

此外，您不应将Vue实例绑定到html，head或body标记。仅使用<div id="app"></div>之类的常规元素并设置您的Vue el: '#app'

或者你可以使用它：

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

<强>更新虽然上面的代码可以解决您的问题。我创建了 tiny vue-title component，可以轻松地在项目中使用。

示例：

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

在vuejs中动态绑定标题标记

1 个答案: