如何使用vue js访问dom中的json数据

Question

请我如何使用vue js访问json在dom

这是我的脚本标签

<script>
import axios from "axios";
export default {
components: {},
data() {
return {
responseObject: ""
};
},
async mounted() {
try {
const response = await axios.get("http://localhost:4000/api/blogs");
console.log(response);
} catch (e) {
}
}
};
</script>

这是我用来显示数据的模板它没有显示任何东西

<div>
{{responseObject}}
</div>

这是我要显示的json数据

{
"status": true,
"responseObject": {
"resource": "services",
"status": "success",
"data": [
{
"service_id": "0001",
"service_name": "Buy Airtime",
"service_type": "airtime"
},
]}}

请我如何显示json数据在我的dom

Answer 1

您可以通过将响应分配给数据对象属性来实现这一点。

实时演示(描述性注释已添加到下面的代码片段中):

new Vue({
el: '#app',
data: {
responseObject: ''
},
mounted() {
// Just for a demo purpose I am using mock response, You can replace it with an API call.
const response = {
"status": true,
"responseObject": {
"resource": "services",
"status": "success",
"data": [{
"service_id": "0001",
"service_name": "Buy Airtime",
"service_type": "airtime"
}]
}
};

// Now you can assign the required object from the response into the 'responseObject' data property.
this.responseObject = response.responseObject.data;
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="service in responseObject" :key="service.service_id">
<h2>{{ service.service_name }}</h2>
<p>{{ service.service_type }}</p>
</div>
</div>