填充Vue数据对象和控制台日志结果

Question

我在Vue组件中有一个庞大的数据列表,我想动态填充.我试图通过循环和全局变量来做到这一点.它看起来如下:

    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)
        }
      }
    });

基本上我想要做的是获取循环中arr填充了内容数组的变量,buildContent()并在我的vue组件的items data部分中引用它

1. 这可能吗？或没有？
2. 我怎么能console.log()这个items对象？当我尝试这样做时,它是未定义的

Answer 1

尝试将filterItems更改为:

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

从查看您提供的代码,这应该工作.