调用 API 后,我无法在 innerHTML 中检测到 api 数据
I can not detect api data in innerHTML after call the API
在 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 元素
您需要等待回复,请尝试:
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();
},
在 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 元素
您需要等待回复,请尝试:
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();
},