Vue.js父组件事件处理程序方法无法正常访问它自己的数据

Question

简要发生了什么

在父组件中，我将数组传递给子组件，当用户选择该数组的其中一个元素时，子组件会发出一个事件，传递所选项，该项在父组件中处理。我想获取所选元素（在父级的事件处理程序中），并将其推送到父中的不同数组。我很容易访问/ console.log在发射过程中传递的对象，但在父事件处理方法中， this.currentlySelectedAdvertisements（＆lt; ---我要开始填充的空数组）不知何故不再是数组！

当我console.log(this.currentlySelectedAdvertisements)（如下所示）时，控制台会告诉我 __ ob__：Observer ＆lt; ---那是什么？为什么当我需要在事件处理程序中改变它并改变子代的渲染方式时，一个明确定义为数组的属性突然无法使用？奇怪的是，在模板中，如果我放{{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)的屏幕截图 screenshot

Answer 1

好的，所以最后，它以某种方式解决了自己.... 我今天回家了，当我今天早上回来并再次启动webpack开发服务器时，没有任何错误，没有问题，它的工作方式与我昨天的预期相同。我不明白，我很沮丧，但我很高兴我没有失去理智，这就像我想要的那样。