Does anyone have ideas on how preview my url link every time I change the value of url value using vue js

by

This is what I do but seems not working I want every time I click the button the URL will preview. But seems my code is wrong

  <div class="fb-post" loading="lazy" v-bind:data-href="url" data-width="500" 
  data-show-text="true">
  </div> 
  <q-input v-model="url"/>
  <q-btn @click="urlNew" label="sample"></q-btn>

  <script>
    export default {
     data (){
       return {
         url : 'https://www.facebook.com/MINIAutoStudioCebu/posts/187798053126949',
       },
       methods: {
        urlNew() {
         this.url = 'https://www.facebook.com/sunstarcebu/photos/a.162049727175929/3788412284539637/'
        },
       }
     }
  </script>

23 thoughts on “Does anyone have ideas on how preview my url link every time I change the value of url value using vue js”

  1. You can re-parse the element by using the Javascript SDK every time you updated the url:

    FB.XFBML.parse();

    Doc: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

    Alternatively, you can just embed the post in iframe mode (Not recommend due to iframe’s height is fixed):

    <iframe src="https://www.facebook.com/plugins/post.php?href={POSTURL}%2F&width=500&show_text=true&height=274" width="500" height="274" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

    Doc: https://developers.facebook.com/docs/plugins/embedded-posts/

    Demo link of above two methods: https://codesandbox.io/s/we6hy

    Reply

Leave a Comment