Question

我试图通过API调用将我网站的社交共享元标记更改为来自后端数据库的数据

head: {
// To use "this" in the component, it is necessary to return the object through a function
title: function () {
  return {
    inner: this.title
  }
},
meta: function () {
  return [
     { name: 'description', content: this.meta.description, id: 'desc' },
     { name: 'application-name', content: this.meta.application_name },
    // Twitter
    { name: 'twitter:title', content: this.title },
    // with shorthand
    { n: 'twitter:description', c: this.meta.description },
    // Google+ / Schema.org
    { itemprop: 'name', content: this.meta.application_name },
    { itemprop: 'description', content: this.meta.description },
    // Facebook / Open Graph
    { property: 'fb:app_id', content: '150240095600075' },
    { property: 'og:title', content: this.title },
    // with shorthand
    { p: 'og:image', c: 'http://jekalowa.com/static/favicon.png' }
  ]
}

}

然后在我的方法对象

中

methods: {
getAsyncData: function () {
  var self = this
  window.setTimeout(function () {
    self.title = self.artist.stagename + ' | ' + self.title
    self.meta: function () {
      return [
         { name: 'description', content: this.meta.description, id: 'desc' },
         { name: 'application-name', content: this.meta.application_name },
        // Twitter
        { name: 'twitter:title', content: this.title },
        // with shorthand
        { n: 'twitter:description', c: this.meta.description },
        // Google+ / Schema.org
        { itemprop: 'name', content: this.meta.application_name },
        { itemprop: 'description', content: this.meta.description },
        // Facebook / Open Graph
        { property: 'fb:app_id', content: '150240095600075' },
        { property: 'og:title', content: this.title },
        // with shorthand
        { p: 'og:image', c: 'http://example.com/static/favicon.png' }
      ]
    }
    self.$emit('updateHead')
  }, 3000)
}

}

我希望Facebook，Twitter，LinkedIn和Google+等社交分享元标记以及页面的其他元标记信息在页面完全呈现（装载或加载）时发生变化，因为所有信息都来自后端数据库所以当用户将页面共享到Facebook，Twitter，LinkedIn和Google+时，图像，标题，描述和信息将来自数据库。我在webpack编译代码时遇到这些错误：

解析错误：预期的意外令牌;

Answer 1

我认为这里确实存在一个问题：

self.title = self.artist.stagename + ' | ' + self.title
self.meta: function () {

你不必说：

self.meta = function() ... OR { ... } ?

我认为这里肯定存在语法错误。

Answer 2

您的代码中self.meta:处有语法错误，而不是冒号:，应为等号=。

self.meta = function () {
  return [
   {}
  ]
}

Vue-Head =＆gt;如何异步更改元函数中的信息

2 个答案: