Как использовать переменную Vue в metaInfo?

Question

Каков правильный синтаксис этой строки 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  
                    })

Answer 1

В шаблонных литералах перед фигурными скобками используются обратные кавычки и знак доллара, например:

title: `${product.name} wallpaper`

Чтобы использовать реактивные переменные в metaInfoкак часть функции, в документации Vue Meta говорится, что вы можете сделатьmetaInfoфункцию и назначьте реактивную переменную локальной переменной перед возвратом данных. Например:

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

Один из авторов Вью Мета объяснил, почему вы должны сделать это таким образом здесь.