Tunjukkan nama pembolehubah Vue meta i18n dan bukannya nilai

Question

Saya mempunyai projek vue2 dan menggunakan vue-meta dan vue-i18n untuk menyetempatkan projek itu. Dalam penanda halaman pelayar saya, tajuk halaman web tidak ditunjukkan, sebaliknya pembolehubah ditunjukkan. Isu yang sama berlaku dalam Google Analitis, nampaknya menunjukkan pembolehubah dan bukannya nilai dalam pembolehubah.

Ini ialah coretan kod komponen Laman Utama saya:

name: 'Home',
    metaInfo () {
      kembali {
      tajuk: ini.$t("home.meta.title"),
      meta: [{
        nama: "penerangan",
        kandungan: ini.$t("home.meta.descriptioncontent")
      }, {
        nama: "kata kunci",
        kandungan: ini.$t("home.meta.keywordscontent")
      },
      { property: 'og:title', content: this.$t("home.meta.title")},
      { property: 'og:site_name', kandungan: 'www.examplesite.se'},
      { property: 'og:description', content: this.$t("home.meta.descriptioncontent")},
      { property: 'og:type', content: 'Home'},
      { property: 'og:url', kandungan: 'https://examplesite.se/'},
      { property: 'og:image', kandungan: 'https://www.examplesite.se' + '/img/' + 'example_logo_social.png'}
      ]
      }
    },
    data() {
      kembali {
        fiimagefolder: '../../Images/',
        bimagefolder: '../../fImages/',
      };
    },

Jadi ini.$t("home.meta.title") pembolehubah menyimpan terjemahan Sweden dan Inggeris. Di dalam tapak, ia menunjukkan tajuk yang betul dalam kedua-dua bahasa, tetapi Google Analitis hanya menunjukkan "home.meta.title".

Daripada apa yang saya faham, perangkak tidak dapat melihat nilai pembolehubah saya kerana ia tidak mempunyai sebarang skrip yang dimuatkan. Ada idea?

Answer 1

Alangkah baiknya untuk melihat beberapa kod anda supaya kami dapat memahami cara anda menyediakannya, jika tidak, kami akan berada dalam keadaan gelap dan sukar untuk membantu anda. Jadi, ini lebih kepada komen daripada jawapan, tetapi saya akan berkongsi beberapa kod yang mungkin membantu yang tidak boleh dimasukkan ke dalam ulasan.

Saya menganggap anda menggunakan vue-i18n, dan saya rasa anda mentakrifkan vueMeta sebagai objek. Walau bagaimanapun, jika anda mentakrifkannya sebagai fungsi, anda boleh mengakses data komponen lain, termasuk this.$t. Mereka harus bekerjasama seperti ini:

<template>
<div>
    <p>这个页面的标题应该是“Translated Title”。</p>
</div>
</template>

<script>
export default {
    metaInfo () {
        return {
            title: this.$t('title')
        }
    }
}
</script>

<i18n>
{
    "en": {
        "title": "Translated Title"
    }
}
</i18n>