如何在 metaInfo 中使用 Vue 变量？答案

【问题标题】：How to use a Vue variable in metaInfo?如何在 metaInfo 中使用 Vue 变量？
【发布时间】：2020-04-25 00:50:01
【问题描述】：

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

export default {
metaInfo: {
      title: "{product.name} wallpaper",

一行出现在表格中：

title: "Space wallpaper",

product.name我在api中得到它：

mounted() 
{ 
let vm = this
vm.getProducts(); 

},
methods: {
getProducts() {
                let vm = this
                axios.get('/api/products')
                    .then(function(response) {
                        vm.products = response.data.data  
                    })

【问题讨论】：

您是否希望基于属性构建字符串？假设产品是一个属性，这样的事情会让你更接近：export default { metaInfo: { : this.product.name + 'wallpaper',
@JonE product.name 我在 api 中得到它。在问题中添加。
我仍然没有在任何地方看到“产品”。产品是模板循环中的当前项目吗？尽可能多的代码会让别人更容易提供帮助。也就是说，脚本只是 javascript，所以如果你正在构建一个字符串，请使用字符串连接。

标签： javascript vue.js syntax vue-meta

【解决方案1】：

Template literals 在大括号前使用反引号和美元符号，例如：

title: `${product.name} wallpaper`

要将metaInfo 中的反应变量用作函数的一部分，Vue Meta docs 表示您可以将metaInfo 设为函数并在返回数据之前将反应变量分配给局部变量。例如：

metaInfo() {
      const product = this.product;
      return {
          title: `${product.name} wallpaper`
      }
}

Vue Meta 的一位贡献者解释了为什么你需要这样做here。

【讨论】：

这不起作用。标签内的这段代码
不确定我是否理解您的意思？会不会是你的浏览器还没有support 模板字面量？
此代码不在标记中。浏览器没问题
@algebra 我添加了一些我现在在文档中找到的信息。希望对你有用。
它拯救了我的一天。谢谢@DMalan。我使用 metaInfo 作为属性。在我将其更改为方法后，问题就解决了。