vuejs에서 제목 태그를 동적으로 바인딩

vuejs에서 제목 태그를 동적으로 바인딩

저는 vuejs가 처음입니다.

제목 태그의 데이터를 동적으로 바인드하려고 합니다.간단한 html 페이지에서 vue-head를 사용하여 이 작업을 수행했습니다.저는 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/

고마워요.

를 사용하다computed소유물.

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

사용할 필요가 없습니다.<title>{{title}}</title>만약 당신이 바꾼다면titleVue에서 자동으로 페이지에 적용됩니다.

또한 Vue 인스턴스를 바인딩하지 마십시오.html,head또는body태그. 일반 요소만 사용합니다.<div id="app"></div>Vue를 설정합니다.el: '#app'

또는 다음을 사용할 수 있습니다.

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

업데이트: 위의 코드로 문제를 해결할 수 있습니다.귀사의 프로젝트에서 쉽게 사용할 수 있는 이 작은 vue-title 컴포넌트를 만들었습니다.

예:

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

언급URL : https://stackoverflow.com/questions/45233225/dynamically-binding-title-tag-in-vuejs