CODEWITHSUNDEEP
vue.js
DukesNuz
DukesNuz

Reputation: 87

nicolasbeauvais/vue-social-sharing Using this Package and Want to Make Dynamic Title, Description, Quote, Hashtags

Cannot figure out how to make the values dynamic. I am using this package on blog posts. Each post has different values.

 <social-sharing url="https://vuejs.org/"
                  title="The Progressive JavaScript Framework"
                  description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                  quote="Vue is a progressive framework for building user interfaces."
                  hashtags="vuejs,javascript,framework"
                  twitter-user="vuejs"
                  inline-template>

Any help would be appreciated. Thank you

Update. I used this code and seems to work fine.

   <social-sharing
    :url="getUrl()"
    :title="post.subject"
    :description="post.subject"
    :quote="post.subject"
    :hashtags="tagsstring +'blog'"
    twitter-user="Dukesnuz"
    inline-template
  >

I wrote a short blog [post]: https://david.dukesnuz.com/blog/10/installing-a-social-media-package-in-a-vuejs-component on this topic.

Upvotes: 1

Views: 725

Answers (1)

Matt U
Matt U

Reputation: 5118

You should be able to use standard binding with v-bind: so:

<social-sharing v-bind:url="expressionOrVariableName"
    v-bind:title="blogPost.title"
    ...and so on
    inline-template>

Where the value you pass to the binding is an expression or a variable/prop name.

Upvotes: 3

Related Questions