Vue-meta: metaInfo 无法访问计算属性

Question

我正在使用 vue-meta 动态更改我的元标记。我只想在某些特定页面上更改它。

我正在使用 metaInfo 函数并尝试更改，例如，标题。但是来自我的 getter 的数据未定义，这就是我无法更改元标记中的标题的原因。似乎 metaInfo 函数尝试在组件实际拥有数据之前访问数据。

这是我在组件中的代码：

<template>
...
</template>

<script>
 export default {
     metaInfo() {
       return {
         title: this.getViewPage.data.meta.title, // data is undefined
    };
  },
  created() {
     this.loadViewPage();
  },
  computed: {
     ...mapGetters(['getViewPage']),
  },
  methods: {
     ...mapActions(['loadViewPage']),
};
</script>

Answer 1

vue-meta 只是从您的 metaInfo 函数创建计算属性（根据插件源代码），所以我假设您的 loadViewPage 操作填充 data 异步对象，您的问题只是转换为空检查问题。

所以你应该在使用它的属性之前检查数据，当数据被加载时，metaInfo 也会更新对象：

     metaInfo() {
         // don't know your return object structure, 
         // maybe you should check whole this.getViewPage
         let data = this.getViewPage.data; 
         return {
             title: data ? data.meta.title : "some placeholder title",
         }
     };

Vue-meta: metaInfo 无法访问计算属性

Vue-meta: metaInfo doesn't have an access to computed properties

javascript

vue.js

vue-meta