I have a huge list of data in a Vue ponent 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 es 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 ponent

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

I have a huge list of data in a Vue ponent 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 es 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 ponent

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

• javascript
• arrays
• vue.js

1 Answer 1

Try changing filterItems to:

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

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