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

我想动态填充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数据部分中引用了它


这可能吗？或者没有？
如何console.log() items对象？当我尝试这样做时，它是不确定的

最佳答案

尝试将filterItems更改为：

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

通过查看您提供的代码，应该可以正常工作。