vue.js - 在我使用 nuxt-property-decorator 的 nuxtjs 中添加动态元标记时遇到问题

Question

我尝试使用nuxt-property-decorator在 nuxtjs 中添加元标签，但只添加了标题标签，但没有添加其他元标签

而且我也使用了 vue-meta包，但我也未能解决这个问题

1. 这就是我的代码的样子：

   <script lang="ts">
   import { Component, Vue, Prop } from "nuxt-property-decorator";
   
   @Component({
         metaInfo:{
               title: 'Default  Title',
               titleTemplate: '%s | vue-meta Example App',
   
               meta: [
                   { charset: 'utf-8' },
                   { vmid: 'description', name: 'description', content: 'this is a description'}
               ]
           },
           components: {
   }
   })
       export default class HomePage extends Vue {
   }
   

从上面的代码只添加标题标签

2. 尝试使用 Nuxtjs文档代码：

<script lang="ts">
    import { Component, Vue, Prop } from "nuxt-property-decorator";

    @Component({
          head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  

    },
 

components: {
        }
            })
   

    export default class HomePage extends Vue {
            }
        </script>

它没有添加任何东西

3. 即使以这种方式尝试，这也不起作用

@Component({
                  head: {
            title: 'my website title',
            meta: [
              { charset: 'utf-8' },
              { name: 'viewport', content: 'width=device-width, initial-scale=1' },
              {
                hid: 'description',
                name: 'description',
                content: 'my website description'
              }
            ],
            link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
          }

4. 其他方式在类中添加代码。没用。

export default class PwHomePage extends Vue {
        

        head() {
      return {
        title: "Default  Title",
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Home page description'
          }
        ]
      }
        }

5. 另一种方式。

export default class PwHomePage extends Vue {
        

        metaInfo() {
  return {
    title: 'Default  Title',
    titleTemplate: '%s | vue-meta Example App',
    meta: [{
      vmid: 'description',
      name: 'description',
      content: "this.description",
    }]
  }
}
        }

Answer 1

嘿我解决了这个问题试试这个代码。

@Component({
    asyncData({ params, error }): Promise<any> {
        ...
    },

    metaInfo(this: MyPageClass): object {
            return {
            title: this.myAsyncData,
            titleTemplate: '%s | vue-meta Example App',
            
            meta: [
              {name: 'description',content: 'This is Free Projects  Page'},
              {property:"og:title",content: "Epiloge - Build your network in your field of interest"},
              {property:"og:type",content: "website"},
              {name:"robots",content: "index, follow"},

            ],
            
       };
   }
})

class MyPageClass extends Vue {
    myAsyncData?: string

感谢FreekVR的回答链接：