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部分中引用它

这可能吗？还是不？
我如何console.log() items个对象？当我尝试这样做时，它是未定义的

Answer 1

尝试将filterItems更改为：

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

从查看您提供的代码开始，这应该可行。

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

1 个答案: