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

时间:2018-11-14 08:05:02

标签: javascript vue.js vue-meta

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

我正在使用metaInfo函数并尝试更改例如标题。但是来自我的吸气剂的数据是不确定的,这就是为什么我不能在meta标签中更改标题的原因。似乎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>

1 个答案:

答案 0 :(得分:2)

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",
         }
     };
相关问题