I can not detect api data in innerHTML after call the API

Question

I am facing a problem catching innerHTML after calling the API using Axios in Vue js.

here is my HTML code

<div id="vue-app">
   <div id="sourceText" style="display: none" v-html="`${reqData}`"></div>
</div>

I used 'v-html' because my requested data is HTML format.

Here are my vue.js scripts

var vueApp = new Vue({
el: '#vue-app',
data(){
  return{
     reqData: null,
  }
},
methods:{
getStory:function () {
    axios
    .get('https://api.coindesk.com/v1/myApi')
    .then((response) => (this.reqData = response.data.content))
    .catch((error) => console.log('error SMS', error));},
},
activate: function () {
    var sourceText = document.getElementById('sourceText').innerHTML;
    this.line_array = sourceText.split(this.line_spliter);
}
},

beforeMount() {
    this.activate();
    console.log('beforeMount', document.getElementById('sourceText'));
},
mounted() {
    this.getStory();
    console.log('mounted', document.getElementById('sourceText'));
},



})

up to this works good, but when I am trying to get innerHTML from sourceText in activate function it not work.

I consoled in both functions, the result shows

beforeMount <div id=​"sourceText" style=​"display:​ none" v-html=​"`${reqData.content}​`">​</div>​

mounted null

The result should look like this:

<div id="sourceText" style="display:none">
    <p>Lorem ipsum dolor sit.</p>
    <p>Lorem ipsum dolor sit.</p>
    <p>Lorem ipsum dolor sit.</p>
    <p>Lorem ipsum dolor sit.</p>
</div>

I would like to detect the p element inside the div tag

Answer 1

You need to wait for response, try:

async getStory() {
  await axios
    .get('https://api.coindesk.com/v1/myApi')
    .then((response) => (this.reqData = response.data.content))
    .catch((error) => console.log('error SMS', error));},
},

async mounted() {
  await this.getStory();
},