Блог

Главная - Вопросы по программированию - Я не могу обнаружить данные api в innerHTML после вызова API

Я не могу обнаружить данные api в innerHTML после вызова API

#javascript #vue.js #vuejs3 #vue-directives #vue-slot

Вопрос:

Я столкнулся с проблемой перехвата innerHTML после вызова API с использованием Axios в Vue js.

вот мой HTML-код

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

Я использовал «v-html», потому что мои запрошенные данные имеют формат HTML.

Вот мои vue.js сценарии

 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'));
},



})

до этого все работает хорошо, но когда я пытаюсь получить innerHTML из sourceText в activate
функция у него не работает.

Я утешился в обеих функциях, результат показывает

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

mounted null

Результат должен выглядеть так:

 <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>

Я хотел бы обнаружить элемент p внутри тега div

Комментарии:

1. this.getStory(); срабатывает сразу, но вызов axios является асинхронным. это означает, что он завершится когда-нибудь в будущем. Функция по-прежнему завершается как обычно, и вы console.log(...) запускаетесь немедленно. Асинхронный код еще не завершен, поэтому, конечно, он равен нулю. Вы должны либо запустить свой код в асинхронном обратном вызове ( .then(()=>{...HERE...}) ), либо вернуть все обещание, чтобы вы могли использовать then или await позже

2. @ippi Спасибо, это асинхронная проблема. Я разгадал ее!!!

Ответ №1:

Вам нужно дождаться ответа, попробуйте:

 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();
},
Метки: