Vue-Head => 如何异步更改元函数中的信息答案

【问题标题】：Vue-Head => How can i change the information in the meta function asynchronouslyVue-Head => 如何异步更改元函数中的信息
【发布时间】：2018-05-17 13:50:56
【问题描述】：

我正在尝试通过 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 编译代码时出现这些错误：

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

【问题讨论】：

如果您尝试解析 JSON 数据，请删除注释符号 //
@samayo 评论不是问题，因为我已经删除了它们。我在这一行得到了错误：self.meta: function () {
@ERSS 你有没有想过这个问题？
@ERSS 哪里可以成功分享到社交媒体？
@mythicalcoder 这是不成功的想法，因为 vuejs 不是服务器端呈现的。在 head 部分填充日期之前，Crawler bot 已收到 200 OK 并退出，因为 index.html 文件很小且加载速度更快。我最终使用了 NuxtJs [nuxtjs.org] 它是 VueJs 的 SSR 等价物。

标签： webpack vue.js vuejs2 webpack-2

【解决方案1】：

我认为这里似乎确实存在问题：

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

你不必说：

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

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

【讨论】：

【解决方案2】：

self.meta: 的代码中存在语法错误，而不是冒号 :，它应该是等号 =。

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

【讨论】：