调用 API 后，我无法在 innerHTML 中检测到 api 数据

Question

在 Vue js 中使用 Axios 调用 API 后，我在捕获内部 HTML 时遇到问题。

这是我的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'));
},



})

至此效果很好，但是当我试图从 sourceText 中的 activate 获取 innerHTML 时功能不起作用。

两个函数我都安慰过，结果显示

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>

我想检测 div 标签内的 p 元素

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

调用 API 后，我无法在 innerHTML 中检测到 api 数据

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

javascript

vue.js

vuejs3

vue-directives

vue-slot