尽管成功分配了值，vue变量仍未定义

Question

我正在尝试再次过滤已过滤的对象数组。当我通过console.log（）检查分配是否成功（显示成功）时，我通过对数据变量filterData进行分配过滤后的数组来完成此操作。但是当我尝试过滤甚至console.log this.filteredData时，它显示为“未定义”。我不明白为什么？有任何想法吗？

    name: 'Custom',
    data: function() {
      return {
        order: 'desc',

        hotels: [
          { photo: "/some_address/some_photo.png", name: "Hotel Moscow Name", address: "Moscow, some street, 1",
              amenities: [
                { name: 'wi-fi'}, { name: 'bar'}, { name: 'pool'}, { name: 'transfer'},
                { name: 'bath'}, { name: 'breakfast'}, { name: 'spa'}
              ],
            price: 3000  
           },
           { photo: "/some_address/some_photo.png", name: "Hotel  St.Pitersberg Name", address: "sSt.Pitersberg, some street, 2",
              amenities: [
                { name: 'wi-fi'}, { name: 'bar'}, { name: 'fitness'}, { name: 'transfer'},
                { name: 'bath'}, { name: 'breakfast'}, { name: 'spa'}
              ],
            price: 4000  
           },
           { photo: "/some_address/some_photo.png", name: "Hotel Helsinki Name", address: "Helsinki, some street, 3",
              amenities: [
                { name: 'wi-fi'}, { name: 'bar'}, { name: 'fitness'}, { name: 'pool'},
                { name: 'bath'}, { name: 'breakfast'}, { name: 'spa'}
              ],
            price: 6000  
           },
           { photo: "/some_address/some_photo.png", name: "Hotel Barselona Name", address: "Barselona, some street, 4",
              amenities: [
                { name: 'wi-fi'}, { name: 'bar'}, { name: 'fitness'}, { name: 'pool'}, { name: 'transfer'},
                { name: 'breakfast'}, { name: 'spa'} 
              ],
            price: 7000  
           },
           { photo: "/some_address/some_photo.png", name: "Hotel Berlin Name", address: "Berlin, some street, 5",
              amenities: [
                { name: 'wi-fi'}, { name: 'bar'}, { name: 'fitness'}, { name: 'pool'}, { name: 'transfer'},
                { name: 'bath'}, { name: 'spa'}
              ],
            price: 8000  
           },
           { photo: "/some_address/some_photo.png", name: "Hotel Lisbon Name", address: "Lisbon, some street, 6",
              amenities: [
                { name: 'wi-fi'}, { name: 'bar'}, { name: 'fitness'}, { name: 'pool'}, { name: 'transfer'},
                { name: 'bath'}, { name: 'breakfast'}
              ],
            price: 9000  
           },
           { photo: "/some_address/some_photo.png", name: "Hotel Praga Name", address: "Praga, some street, 6",
              amenities: [

              ],
            price: 1200  
           },{ photo: "/some_address/some_photo.png", name: "Hotel New York Name", address: "New York, some street, 6",
              amenities: [

              ],
            price: 1300  
           },{ photo: "/some_address/some_photo.png", name: "Hotel Toronto Name", address: "Toronto, some street, 6",
              amenities: [

              ],
            price: 1400  
           },
        ],
        amenities: [
          { name: 'wi-fi'},
          { name: 'bar'},
          { name: 'fitness'},
          { name: 'pool'},
          { name: 'transfer'},
          { name: 'bath'},
          { name: 'breakfast'},
          { name: 'spa'}
        ],
        filterValue: null,//initially there is no choosen amenities
        multiFiltersValue: [],
        filteredData: null,
      }
    },
    methods: {
      reverseOrder: function() {
        // console.log("it works!");
        this.order = (this.order === 'desc') ? 'asc' : 'desc';
      },
      changeFilterValue: function(choosenAmenity) {
        if (!this.filterValue && this.multiFiltersValue.length === 0) {
          this.filterValue = choosenAmenity;
          this.multiFiltersValue.push(this.filterValue);
        } else {
          if (this.multiFiltersValue.includes(choosenAmenity)){
            this.multiFiltersValue.splice(this.multiFiltersValue.indexOf(choosenAmenity), 1);
            console.log(this.multiFiltersValue);
          } else {
            this.multiFiltersValue.push(choosenAmenity);
            this.filterValue = null;
            // console.log(this.multiFiltersValue);
            console.log(this.filteredData);
          }
        }
        event.target.classList.toggle('amenityActive');
      }
    },

    computed: {
      orderedKidsList: function(){
        let order = this.order;
        return _.orderBy(this.kids, 'intelligence', [order]); //first argument is an array,
        //second argument is a parameter of sorting
        //third argument is a type of sorting, defined in methods (see below);
      },
      showHasAmenityOnly: function() {
        // console.log(this.multiFiltersValue);
        let runningFilter = this.filterValue ? this.filterValue : this.multiFiltersValue;
        if (!this.filterValue && this.multiFiltersValue.length === 0 && !this.filteredData) {
          return this.hotels;
        } else {
          if (this.filterValue && !this.filteredData) {
            this.filteredData = this.hotels.filter(function(hotel){
             let newAmenities = hotel.amenities.filter(function(amenity){
                return amenity.name === runningFilter;
              })
              return newAmenities.length;
            })
            console.log(this.filteredData);
            return this.filteredData;
          } else if (this.filteredData) {
            console.log("there is a new array of filtered data: ", this.fileredData);
            this.filteredData.filter(function(hotel){
             let newAmenities = hotel.amenities.filter(function(amenity){
                return amenity.name === runningFilter;
              })
              return newAmenities.length;
            })
            return this.filteredData;
          }
        }
      },
      secondFiltration: function(){
        console.log(this.showHasAmenityOnly)
        //похоже, что мультифильтрацию по нескольким критериям можно сделать только используя vuex
      }
    }
  }```