[Vuejs]-Vue.js2 renders empty array

by

0👍

✅

I was able to solve the issue, i am not quite sure why but the issue was because i had initiated my component as this

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

const search = new Vue({
    el: '#search'
});

then in a different file I referenced data and method functions via export default, this caused the issue, removing 

const search = new Vue({
    el: '#search'
});

solves the problem. not sure why that is though,

👤Imi

0👍

I don’t know if this will help, but I put your code together into a runnable snippet, and it works as expected. Obviously I replaced your data request.

It sounds like self is somehow not what you think it is when you do the assignment. I do not know how that would happen, though.

new Vue({
  el: '#search',
  components: {
    search: {
      data: function() {
        return {
          names: []
        };

      },
      methods: {
        getData: function() {
          const self = this;

          setTimeout(function () {
            self.names = [{
                "uri": "http://en.wikipedia.org/wiki/Samsung",
                "id": "24366",
                "type": "org",
                "score": 527013,
                "label": {
                  "eng": "Samsung"
                }
              },
              {
                "uri": "http://en.wikipedia.org/wiki/Samsung_Electronics",
                "id": "30860",
                "type": "org",
                "score": 135216,
                "label": {
                  "eng": "Samsung Electronics"
                }
              }
            ];
          }, 0);

        }
      },
      mounted() {
        this.getData()

        console.log('Component mounted. names is', this.names);
      }
    }
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<search id='search' inline-template>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-body">
            {{names}}
          </div>
        </div>
      </div>
    </div>
  </div>
</search>
👤Roy J

Leave a comment