Estoy usando datos de mi API usando Axios y devolviéndolos en una matriz. Puedo acceder a los datos en la sección html con un simple v-for pero también quiero acceder a los datos dentro de la sección del script, ¿es esto posible? Seguí tratando de hacer referencia a él, pero no puedo encontrar la forma correcta de usarlo.
Necesito los datos porque tengo un gráfico implementado en la vista y los datos para el gráfico están definidos en la sección del script.
Estoy trabajando en un proyecto MVC 6 en un archivo .cshtml. Ya tengo una función de controlador que puede acceder a los datos de la API y se puede acceder a ella haciendo referencia al modelo, pero como solo podía acceder a un punto final de la API por método de controlador, quería implementar Axios.
Código que he usado:
created() { axios.get('https://localhost:44332/api/clients') .then(response => { this.clients = response.data}) .catch(error => {console.log(error)})}
Configuración de Vue:
let app = new Vue({ el: '#app',data() { return { clients: [] }},
Pila tecnológica: Vue 2.6 con Axios, .NET 6 MVC
Si te entendí correctamente, si quieres datos de vue puedes usar $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>