0

I have a vue component where I am populating an array by pushing a json object. The problem is that vue adds observer to the array which makes it impossible to iterate over. May be there is a better way to work with arrays in vuejs. I know that the observer is added to make objects reactive but in this case I do not know how to reach my data

My code:

app.js

require('./bootstrap');

window.Vue = require('vue');
import vueResource from 'vue-resource';
Vue.use(vueResource);

    Vue.component('search', require('./components/Searchnames.vue'));

    const a = new Vue({
      el: '#app',
    });

Search.vue

<template>
            <div class="row">
                <div class="col-md-5">
                <a href='#' class='pointer_panel panel-link'>
                <div class="panel panel-default panel-heading glow-border names">
                {{names}}
                    </div>
                </a>

                </div>
            </div>
    </template>


    <script>
        export default {
            data: function(){
                return {
                  names: []
                };

            },
            methods:  {
             getData: function(){
                 let self = this;
                 this.$http.jsonp(url, {jsonpCallback: "JSON_CALLBACK"})
                  .then(response=>{
                      console.log(response)
                   response.body.forEach(a => this.names.push(a))          
               })
            }
          },
           mounted: function() {    
                this.getData()
                console.log(this.names)
                console.log(this.names.length)        
                console.log('Component mounted.')

             }
        }
    </script>
Imi
  • 529
  • 2
  • 8
  • 23
  • The `mounted` function will finish executing before the callback in `getData` fires. – thanksd Jun 09 '17 at 15:26
  • humm but I see that the array is there – Imi Jun 09 '17 at 15:27
  • @lmi That's an ism of the console, see this answer https://stackoverflow.com/questions/23392111/console-log-async-or-sync – thanksd Jun 09 '17 at 15:33
  • I am not sure it is only that since vue.js is also not rendering anything, also the console.log(this.names) I can see the values I am checking for the length afterwards also I checked with a timeout function to get the logs only after get data is executed i still get the same results – Imi Jun 09 '17 at 15:42
  • Yeah I wouldn't expect it to render correctly since `names` is an array containing an array in the first index. Is `response.body` an array of Strings? Can you show your template? – thanksd Jun 09 '17 at 15:45
  • yes i suspected that so I tried to push individual objects as you wrote in your answer I still dont get anything – Imi Jun 09 '17 at 15:47
  • Not my answer, but pushing won't work as Vue can't react to that. `this.names = response.body` should work though. – thanksd Jun 09 '17 at 15:48
  • 1
    @thanksd Vue wraps push method https://vuejs.org/v2/guide/list.html#Mutation-Methods – qkr Jun 09 '17 at 15:55
  • @qkr guess I was wrong! Not sure why @lmi isn't seeing the changes then because `{{ names }}` should still display all of the elements in the array. – thanksd Jun 09 '17 at 16:02
  • alright this might be a sync async issue I am trying to re factor the code and see if that helps – Imi Jun 09 '17 at 16:10
  • definitely an async issue. Take a look at this fiddle, this is how you should do it: https://jsfiddle.net/5co3ufvp/1/ – thanksd Jun 09 '17 at 19:49

0 Answers0