Vue组件中如何将全局数组赋值给data的items并正确打印该对象？

Why console.log(items) shows undefined #

The reason you're seeing undefined when trying to log items in your filterItems method is simple: items isn't a variable in the method's local scope. In Vue methods, you need to reference data properties using the this keyword to access the component's reactive data. So replace console.log(items) with console.log(this.items) and it will correctly print the array.

Is assigning arr to Vue's items feasible? #

Your current approach might technically work (since items references the same array as the global arr, so pushing elements to arr will update the array items points to), but it's not ideal and can lead to maintainability or reactivity issues. Here's why:

• The Vue instance is created before window.onload runs, so items starts as an empty array. Even though the array gets populated later, relying on global variables to mutate Vue's data is an anti-pattern that makes code harder to debug.
• While Vue can detect array mutations like push, using a global array outside of Vue's reactive system breaks encapsulation and makes it harder to track where data changes are happening.

Better Solutions #

Solution 1: Initialize Vue after populating the array

Wait until your buildContent function has filled the array before creating the Vue instance. This ensures items starts with the populated data:

var arr = [];
function buildContent() {
  var filterItems = document.querySelectorAll('.filter-title');
  for (var i = 0; i < filterItems.length; i++) {
    arr.push(filterItems[i].innerHTML);
  }
  console.log(arr);
  
  // Create Vue instance once arr is ready
  var titleFilter = new Vue({
    el: '#filter',
    data: {
      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(this.items); // Use `this` to access data properties
      }
    }
  });
}
window.onload = buildContent;

Solution 2: Populate Vue's items directly (Recommended)

Eliminate global variables entirely by moving the buildContent logic into the Vue component. This keeps all data management within Vue's reactive system and uses Vue's lifecycle hooks for better alignment with component loading:

var titleFilter = new Vue({
  el: '#filter',
  data: {
    items: [], // Initialize empty reactive array
    filters: [
      { label: 'All Titles', value: false },
      { label: 'a', value: 'a' },
      { label: 'b', value: 'b' },
      { label: 'c', value: 'c' },
    ],
    currentFilter: false,
  },
  methods: {
    buildContent() {
      var filterItems = document.querySelectorAll('.filter-title');
      this.items = []; // Reset if needed
      for (var i = 0; i < filterItems.length; i++) {
        this.items.push(filterItems[i].innerHTML);
      }
      console.log(this.items);
    },
    filterItems(e){
      console.log(this.items); // Correctly access reactive data
    }
  },
  mounted() {
    // Run content build when the component is mounted (DOM is ready)
    this.buildContent();
  }
});

This second approach is preferred because:

• It uses Vue's mounted hook instead of window.onload, which is more integrated with Vue's component lifecycle.
• It removes global state, making your component self-contained and easier to maintain.
• All updates to items are handled through Vue's reactive system, ensuring automatic DOM updates when the array changes.

内容的提问来源于stack exchange，提问作者user5481714