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

Posted 2023-02-22

【中文标题】Vue-Head => 如何异步更改元函数中的信息

【英文标题】：Vue-Head => How can i change the information in the meta function asynchronously

【发布时间】：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 的 s-s-r 等价物。

【参考方案1】：

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

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

你不必说：

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

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

【参考方案2】：

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

self.meta = function () 
  return [
   
  ]