CODEWITHSUNDEEP
javascriptarraysvue.js
kawnah
kawnah

Reputation: 3414

Populate Vue data object, and console log results

I have a huge list of data in a Vue component that I would like to dynamically populate. I'm trying to do that by a loop, and a global variable. It looks like below:

    var filterItems = document.querySelectorAll('.filter-title');
    var filterItemsTitle = filterItems.innerHTML;
    var arr = [];

    function buildContent() {
      for (var i = 0; i < filterItems.length; i++) {
        arr.push(filterItems[i].innerHTML);
      }
      console.log(arr)
    }

    window.onload = buildContent

    var titleFilter = new Vue({
      // in items its refering to arr built in buildContent
      el: '#filter',
      data: {
         // arr comes from buildContent() - I think...does this work?
         items: arr,
         filters: [
            { label: 'All Titles', value: false },
            { label: 'a', value: 'a' },
            { label: 'b', value: 'b' },
            { label: 'c', value: 'c' },
        ],
        currentFilter: false,
      },
      methods: {
        filterItems: function(e){
          console.log(items)
        }
      }
    });

Basically what I want to do is take the arr variable which is populated with an array of content in the buildContent() loop and reference it in the items data section of my vue component

  1. is this possible? Or no?
  2. How can I console.log() the items object? When I try to do it it is undefined

Upvotes: 3

Views: 19276

Answers (1)

John P
John P

Reputation: 409

Try changing filterItems to:

filterItems: function(e){
      console.log(JSON.stringify(this.items))
    }

From looking at the code you provided, that should work.

Upvotes: 12

Related Questions