I am using data from my API by using Axios and returning it in an array. I can access the data in the html section with a simple v-for but I also want to access the data inside the script section, is this possible? I kept trying to reference it, but I can't find the correct way to use it.
I need the data because I have a graph implemented in the view and the data for the graph is defined in the script section.
I'm working in an MVC 6 project in a .cshtml file. I already have controller function that can access data from the API and is accessible by referencing the model, but because I could only access one API endpoint per controller method, I wanted to implement Axios.
Code that i have used:
created() {
axios.get('https://localhost:44332/api/clients')
.then(response => { this.clients = response.data})
.catch(error => {console.log(error)})}
Vue setup:
let app = new Vue({
el: '#app',data() {
return {
clients: []
}},
Tech stack: Vue 2.6 with Axios, .NET 6 MVC
If I understood you correctly, if you want data from vue you can use $data:
let app = new Vue({
el: '#app',
data() {
return {
clients: [],
}
},
async created() {
await axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => { this.clients = response.data})
.catch(error => {console.log(error)})
},
})
function getData() {
setTimeout(() => console.log('outside of vue ', app.$data.clients), 500)
}
getData()<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id='app'>
<div v-for="(client, i) in clients" :key="i">
{{ client }}
</div>
</div>