vue.js - 如何获取值 altLanguages 并将其动态放入 JSON 中，以便可以将其加载到 Head 中

Question

目前我正在尝试获取 altLanguages 的值并在 JSON 中动态输出，因此可以将其注入头部。altLanguages 是在呈现页面之前应该添加的元属性值以避免错误（altLanguages 未定义）。任何人都知道该怎么做。

<template>
  <header class="site-header">
    <router-link to="/" class="logo">Example Site</router-link>
    <nav>
      <ul>
        <li v-for="menuLink in menuLinks" :key="menuLink.id">
          <prismic-link :field="menuLink.link">{{ $prismic.richTextAsPlain(menuLink.label) }}</prismic-link>
        </li>
      </ul>
    </nav>
    <alternate-languages :altLanguages="altLanguages" />
    <!-- <alternate-content :altLanguages="altLanguages" /> -->
  </header>
</template>

<script>
export default {
  props: {
    id: { type: String, default: "" },
    altLanguages: { type: Array, default: () => ([]) }
  },

  data() {
    return {
      menuContent: [],
      menuLinks: [],
      // altLanguages: []
    };
  },

  methods: {
    async getMenu(lang) {
      //Query to get menu content
      const menuContent = await this.$prismic.client.getSingle("menu", {
        lang: lang
      });

      this.menuContent = menuContent;
      this.menuLinks = menuContent.data.menu_links;
    }
  },
  created() {
    // this.getLanguages(this.id);

    this.getMenu(this.$route.params.lang);
  },

  watch: {
    $route(to, from) {
      this.getMenu(to.params.lang);
    }
  }
  // beforeRouteUpdate(to, from, next) {
  //   console.log("new");
  //   this.getMenu(to.params.lang);
  //   next();
  // }
};
</script>


//expected output 

export default {
  data: function () {
    return {
      title: 'My Title'
    }
  },
  // Usage with context the component
  head: {
    // To use "this" in the component, it is necessary to return the object through a function
    title: function () {
      return {
        inner: this.title
      }
    },
    meta: [
    // altLanguages should be output in here.....
      { name: 'description', content: 'My description', id: 'desc' }
    ]
  }
    ...
  }
}

标签： vue.jsvuejs2