How do I put a variable in the <Tweet> id?

[SalocinDotTEN]

My Tweet ID is pulled using the Buffer API and I would like to make it as the Tweet ID.

I have tried but it does not seem to work (or probably I am missing something. I am still quite new to Vue JS)..

Code: -

<template>
<div>
<Tweet :id="status" :options="{ theme: 'dark' }">
                <p>Loading...</p>
              </Tweet>
</div>
</template>

<script>
import { Tweet, Moment, Timeline } from "vue-tweet-embed";
import axios from "axios";

export default {
  components: {
    Tweet
  },
  data() {
    return {
      status: "",
    };
  },
  created() {
    axios
      .get(
        "..."
      )
      .then(response => {
        this.status = String(response.data.updates[0].service_update_id);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

[SalocinDotTEN]

Sorry. Following up, Tried a way that I thought would be successful but it turned out not to work still.

[brattonross]

@SalocinDotTEN I encountered a similar issue where I was dynamically changing the tweet ID, which would not update the component. I managed to get around the issue by setting a key on the Tweet component. This is admittedly a bit hacky, as it forces the component to re-render, however I think it is a suitable workaround for this issue right now.

<Tweet :id="status" :key="status" :options="{ theme: 'dark' }">
  <p>Loading...</p>
</Tweet>

[SalocinDotTEN]

Thanks for the information. I may try it out although I am using a different method now.