La idea es que estoy tratando de construir una pantalla donde las actividades se muestren con algunos filtros. Los datos provienen de una API generada por el CMS. Los filtros no se muestran en el código ya que no es relevante.
Problema Al definir manualmente los 'elementos' en la propiedad de datos, la representación de la lista v-for se muestra bien y proporciona el resultado deseado. Al extraer los datos de la API y asignarlos a elementos, v-for no muestra nada.
Mis pensamientos Creo que el v-for se ejecuta antes de que la solicitud de la API termine de colocar los datos en el valor de 'elementos'. Actualmente estoy usando la propiedad 'creada' para activar la función, también usé 'Montado ()' antes, esto tampoco funcionó.
Versiones Vue 2.6.14, Axios 0.21.1
Código Vue
var vue = new Vue({ el: '#app', data: { items: null, }, created: function () { this.fetchData() }, methods: { fetchData: function() { axios .get('/api/activities.json') .then(response => (this.items = response.data.data)) } } })Plantillas
<div id="app"> <ul class="example"> <li v-for="item in items"> {{ item }} </li> </ul> </div>Su código parece estar funcionando bien. Mire a continuación, acabo de reemplazar su llamada api con una llamada api REST ficticia y está funcionando bien. Consuele los datos de response.data.data y vea si realmente está recibiendo una matriz allí.
Vue.config.productionTip = false Vue.config.devtools = false let vue = new Vue({ el: '#app', data: { items: null, }, created() { this.fetchData() }, methods: { fetchData: function() { axios.get('https://jsonplaceholder.typicode.com/users') .then(response => { this.items = response.data })} } }) <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div id="app"> <ul class="example"> <li v-for="item in items"> {{ item.id }} - {{ item.name }} </li> </ul> </div> </div>