问题标签 [vue-meta]

脚本中这一行 Vue 的正确语法是什么：

这条线出现在表格中：

product.name我在api中得到它：

我正在做一个带有网格和 snipcart 的电子商务网站。问题是当我测试 snipcart 的结帐时它失败了。snipcart 文档说要添加一行

我将其添加到我的布局文件夹中的default.vue文件中。但是当我在构建后检查元素时，我在 DOM 中看到

不呈现 data-api-key 属性。根据snipcart的 [example][1]使用 vue-meta 将 api-key-data 注入到 main.js 中的标记中具有相同的结果：

snipcart 日志显示：

非常感谢让 snipcart 与 gridsome 一起工作的任何帮助。

更新： - 按照说明进行标记和仪表板设置如下，并部署到 netlify @ https://ecommerce-gridsome.netlify.com

> 日志中仍然出现错误：

我{src: '~/plugins/vue-meta.js', ssr: true},有nuxt.config.js

在index.vue：

但这些都不会呈现服务器端 - 它只呈现客户端，这意味着 Facebook 不会读取 OG 元元素。

是否需要为 Nuxt 设置其他内容才能呈现此服务器端？

模式在 nuxt.config.js 中设置为“通用”。不管我是使用 generate、run dev 还是 run start，它们的结果都是一样的。

我在我的博客的 Vue 应用程序中有一个非常基本的设置，我有/blog，这是我的博客帖子的列表，然后/blog/:slug，slug 是单个帖子的 slog（例如mysite.com/blog/my-awesome-blog-post。我vue-meta用于元标记, 一切都很好 - 除了个别博客文章的标签之外的一切。我的设置是：

应用程序.vue

博客.vue

BlogPost.vue（遵循vue-meta 文档）

问题是当我转到博客文章页面时，标题元标记仍然是My Site | Blog Home，而不是My Site | My Awesome Blog Post. 如果我在 for 中放入一个静态字符串title，它可以正常工作。而且，如果我metaInfo()在 Vue devtools 中检查函数返回的对象，它会显示title适当的值。我做错了什么，还是这是一个错误？根据文档，这很“容易”，但似乎并非如此。

我需要创建一个 mixin 来设置标题和元数据。为此，我找到了 vue-meta，效果很好。但我还不熟悉基于打字稿和类的组件。

如何pageTitle在组件属性中访问类成员metaInfo()？

示例代码：

路线更改时，我网站上的元数据不会更新。路线本身有一个watch可以很好地更新视图，但从metaInfo()没有vue-meta跟上。我的<script>代码部分如下所示：

发生的事情是，当我更改路线并从/product/123to/product/124时，metaInfo()仍然显示/product/123. 如果我点击刷新，则metaInfo()更新并显示/product/124.

我需要watch触发更新metaInfo()但不知道该怎么做。我在任何地方的文档中都找不到此信息。请帮忙？

我开发了一个 Vue 应用程序，每个页面都有导航和内容。我需要为 Twitter 和 Facebook 卡的每个不同页面设置元标记。为此，我使用了 vue-meta 库，并提出了以下代码：

这些属性是从 mount() 钩子的 API 中获取的，我可以看到它们已正确添加。但是共享还没有起作用，我认为它们需要添加到主 index.html 中吗？但在我的情况下这是不可能的，因为它们是动态的，并不总是固定的。有没有解决的办法？我知道 SSR 可以解决这个问题，但目前这不是一个选项，因为此时使用 Nuxt 重写大多数应用程序是不可接受的。

我的网站缺少 og:image 标签，并且没有在 LinkedIn 上显示图片。解决方案是添加我添加的元标记，但是一旦项目构建和部署，图像的名称就会更改。

我正在寻找类似的东西，但是图像将被实际生成的图像路径替换为 g-image 中的图像路径

谢谢

我在将元信息从 graphql 添加到 vue-meta 时遇到问题。

如何从外部 about.gql 信息添加到 vue-meta？我想避免再添加一个 gql 查询。所以我对 Vue 和 Apollo 不是很有经验，任何帮助都会很好！

非常感谢！

关于.vue

TLDR：子路由的预渲染视图使用父元信息，但我希望他们使用子路由组件上定义的元信息。

我已经设置了一个 Nuxt/Vue 站点，该站点具有一个登录页面，它提供了一个项目网格，并且在我的文件/items/index.vue中将子路由设置为该登录页面的子级。router.js这些子路由在/items/index.vuevianuxt-child或router-view组件中呈现为模式。子路由调用一个名为的组件，该组件/components/ItemsModal.vue设置适当的元标记（标题、OG：数据等）

当我输入子路由的 URL 时，在父/items/index.vue元信息的初始闪烁之后，元/头信息会按预期更新。但是，我的 SEO 信息显示的是父元/头信息，而不是子路由组件定义的更新信息。当我查看源代码时，我看到预渲染的交付页面确实有父信息，而不是子路由信息，也没有与子路由组件关联的任何内容。

任何人都有配置子路由以使用子路由组件中定义的头部信息进行预渲染的经验吗？我希望子路由先渲染其关联的组件，然后再在预渲染中调用它。

下面的代码，为了清楚起见被截断/修改。

路由器.js

/item/index.js

/item/index.js