如何在元信息中使用 Vue 变量? [英] How to use a Vue variable in metaInfo?

问题描述

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

What is the correct syntax for this line Vue inside the script:

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

该行出现在表单中:

title: "Space wallpaper",

product.name 我在 api 中得到它:

product.name I get it in api:

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

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

推荐答案

模板文字 在大括号前使用反引号和美元符号，例如:

Template literals use backticks and a dollar sign before the braces, e.g.:

title: `${product.name} wallpaper`

要将 metaInfo 中的反应变量用作函数的一部分，Vue Meta docs 说你可以使 metaInfo 成为一个函数，并在返回数据之前将反应变量分配给局部变量.例如:

To use reactive variables in the metaInfo as part of a function, the Vue Meta docs says that you can make metaInfo a function and assign the reactive variable to a local variable before returning the data. For example:

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

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

One of the contributors to Vue Meta explained why you need to do it this way here.

这篇关于如何在元信息中使用 Vue 变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！