Me enfrento a un problema al capturar el HTML interno después de llamar a la API usando Axios en Vue js.
aquí está mi código HTML
<div id="vue-app"> <div id="sourceText" style="display: none" v-html="`${reqData}`"></div> </div>
Usé 'v-html' porque mis datos solicitados están en formato HTML.
Aquí están mis scripts 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')); }, })
hasta esto funciona bien, pero cuando intento obtener HTML interno de texto fuente en la función de activación , no funciona.
Consolé en ambas funciones, el resultado muestra
beforeMount <div id="sourceText" style="display: none" v-html="`${reqData.content}`"></div>
mounted null
El resultado debería verse así:
<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>
Me gustaría detectar el elemento p dentro de la etiqueta div
Necesitas esperar respuesta, prueba:
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(); },