Vue.js父組件事件處理程序方法無法正常訪問其自身的數據

Question

簡要介紹

在父組件中，我將一個數組傳遞給子組件，並且當用戶選擇該數組的元素之一時，子組件將發出一個事件，並傳遞選定項，該事件在父項中進行處理。 我想獲取選定的元素（在父級的事件處理程序中），並將其推入父級的另一個數組中 。 我可以輕松訪問this.currentlySelectedAdvertisements在發射過程中傳遞的對象，但是在父級的事件處理方法中， this.currentlySelectedAdvertisements （<---我要開始填充的空數組）不再數組！

當我console.log(this.currentlySelectedAdvertisements) （如下所示）時，控制台告訴我它是__ob__：觀察者 <---那是什么？ 為什么當我需要在事件處理程序中更改它並更改子代的呈現方式時，將一個明確定義為數組的屬性突然不可用？ 奇怪的是，如果在模板中放置{{currentlySelectedAdvertisements}}它會顯示一個空數組[] 。 另外，在父級的事件處理方法中，如果我使用[].push.call(this.currentlySelectedAdvertsiements, payload.chosen) ，則不會出錯。 但是，我似乎無法遍歷this.currentlySelectedAdvertisements並影響子代的呈現方式。 我對此感到很困惑，我哪里出錯了？ 我對Vue.js相當陌生，這只是我使用過的第二個項目。 請幫助我獲得啟發/理解。

帶有代碼樣本的完整信息

我有一個父組件 ，它的data屬性中有一個數組，像這樣

// **** PARENT COMPONENT JS ****
import Advertisement from './Advertisement.vue';

export default {
  name: 'Column2',
  data() {
    return {
      columns: 2,
      currentlySelectedAdvertisements: [] // <--- clearly defined as an Array
    };
  },
  props: { 
    adPool: Array,
    positions: Array
  },
  components: {
    'advertisement': Advertisement,
  },
  methods: {
    handleSelection(payload) { // <--- event handler method

      console.log("in column2 component and advert selected was ", payload);
      // this.currentlySelectedAdvertisements.push(payload.chosen);

      console.log(this.currentlySelectedAdvertisements);

      //  right here ^ now shows as '__ob__: Observer' in the console ****

    }
  }
};

我正在使用此數組來呈現子組件 advertisement如下所示（這是模板部分）

<!-- *** PARENT COMPONENT TEMPLATE FOR RENDERING CHILD COMPONENTS *** -->
<template>
   <div class="column2">
      <div v-for="(ad, index) in currentlySelectedAdvertisements" class="column2__column">
         <advertisement :position="positions[index]" :adPool="adPool" :image="ad.image"></advertisement>
      </div>
      <div v-for="i in (columns - currentlySelectedAdvertisements.length)" class="column2__column column2__column--dashed">

         <advertisement @advertisement-selected="handleSelection" :position="positions[i-1]" :adPool="adPool"></advertisement>

     <!-- here is the listener ^ ****** -->

      </div>
   </div>
</template>

現在在子組件中，我有一個select元素，該元素呈現用戶要選擇的選擇（這是模板的一部分）

 <!-- *** CHILD COMPONENT TEMPLATE *** -->
 <div class="advertisement__chooser">

    <select v-model="selected" @change="advertisementSelected(selected)" :name="ad_position">

     <!-- here is the change listener ^ for when the user picks an option ***** -->

      <option value="">Please Choose</option>
      <option v-for="ad in adPool" :data-img="ad.image" :value="ad.id">{{ad.name}}</option>
    </select>
  </div>

這是找到所選項目並發出事件供父級監聽的方法

 // *** PART OF CHILD COMPONENT JS ***
 methods: {

  advertisementSelected(id, event) { // <--- event handler in child

    var chosen_advert = this.findAdById(id);
    var event_payload = {};
    if ( chosen_advert ) {
      event_payload = {
        position: this.ad_position,
        chosen: chosen_advert
      };
      console.log('In Advertisement.vue ', event_payload);

      this.$emit('advertisement-selected', event_payload);

      // and here ^ is the emission of the event ******

    }
  },
  findAdById(id) {
    for ( var i in this.adPool ) {
      if ( this.adPool[i].id === id ) {
        return this.adPool[i];
      }
    }
    return -1;
  }
}

這是父級事件處理程序 屏幕快照中console.log(this.currentlySelectedAdvertisements) 的 屏幕截圖

Answer 1

好的，到最后，這個問題以某種方式解決了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。到昨天。 我不明白，我很沮喪，但我很高興自己沒有失去理智，並且可以按照我想要的方式工作。