Vue.js Vuemeta：metaInfo 无权访问计算(computed)属性

发布于11月21日

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

我正在使用metaInfo函数并try 更改，例如，标题.但是我的getter中的数据是未定义的，这就是为什么我不能更改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>

推荐答案

vue-meta只是从metaInfo函数中创建计算(computed)属性(根据插件源代码)，所以我假设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",
         }
     };