为什么我的vue js数据成员没有得到更新？

Question

数据部分

  data () {
    return {
      containsAd: true
    }
  },

操作数据成员containsAd

的方法

  updated () {
    let _this = this
    window.googletag.pubads().addEventListener('slotRenderEnded', function (event) {
      if (event.slot.getSlotElementId() === 'div-gpt-ad-nativead1') {
        _this.containsAd = !event.isEmpty // this is false
        console.log('Ad Exists? ', _this.containsAd)
      }
    })
  },

只需检查值是否已更改。

check () {
  let _this = this
  setTimeout(function () {
    console.log('Current Value', _this.containsAd)
  }, 5000)
}

结果输出

Answer 1

我认为在已挂接的钩子中执行事件侦听器将对您的问题进行排序。

data() {
    return {
        containsAd: true
    };
},

mounted() {
    window.googletag.pubads().addEventListener('slotRenderEnded', event => {
        if (event.slot.getSlotElementId() === 'div-gpt-ad-nativead1') {
            this.containsAd = ! event.isEmpty // this is false
            console.log('Ad Exists?', this.containsAd);
        }
    });
}

还可以使用es6速记功能来避免设置_this。