Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

open a beforeChange hook #784

Open
amokrunner opened this issue Oct 19, 2022 · 0 comments
Open

open a beforeChange hook #784

amokrunner opened this issue Oct 19, 2022 · 0 comments

Comments

@amokrunner
Copy link

amokrunner commented Oct 19, 2022

A beforeChange hook would be super useful. Right now I'm using the following code in my app to set og and twitter meta properties equal to the title/description. Seems to work fine with the downside that it calls twice each update, as setting the data properties within the changed() function causes it to update again. If we had a beforeChange where we could manipulate info, it would be a lot cleaner. Thanks!

  metaInfo () {
    return {
      title: 'Home',
      titleTemplate: '%s | My App',
      meta: [
        { vmid: 'og:title', name: 'og:title', content: this.title },
        { vmid: 'twitter:title', name: 'twitter:title', content: this.title },
        { vmid: 'description', name: 'description', content: this.description },
        { vmid: 'og:description', name: 'og:description', content: this.description },
        { vmid: 'twitter:description', name: 'twitter:description', content: this.description }
      ],
      changed: (info) => {
        this.title = info.titleChunk
        this.description = info.description || 'some default description'
      }
    }
  },
  data () {
    return {
       this.title: '',
       this.description: ''
   },
}

and then in other components:

  metaInfo: {
    title: 'Page Title',
    description: 'page description.'
  },

with a beforeChange hook I could do something like this instead, and it wouldn't render multiple times:

  metaInfo () {
    return {
      title: 'Home',
      titleTemplate: '%s | My App',
      beforeChange: (info) => {
        info.meta = [
          { vmid: 'og:title', name: 'og:title', content: info.title },
          { vmid: 'twitter:title', name: 'twitter:title', content: info.title },
          { vmid: 'description', name: 'description', content: info.description },
          { vmid: 'og:description', name: 'og:description', content: info.description },
          { vmid: 'twitter:description', name: 'twitter:description', content: info.description }
        ]
      }
    }
  },
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant