skyskni
曾经对你的执着
采纳率100%
2021-01-30 17:13

Vue中methods使用data的疑问

代码是这样的,在data中定义了一个名为AnimatorChoices的属性并设置为false

data() {
      return {
        AnimatorChoices: false
      }
},

在methods中打印

methods: {
      upOptions() {
        console.log(this.AnimatorChoices)  //这里输出false
        onscroll = function () {
          let height = document.body.scrollTop || document.documentElement.scrollTop;
          if (height > 80) {
            console.log(this.AnimatorChoices)  //这里输出为什么为undefined
            this.AnimatorChoices = true;  
            console.log(this.AnimatorChoices)
          }
        }
      }
    },

方法在created声明周期函数中调用

created() {
      this.upOptions()
    }

为什么会输出undefined

 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • qqzhuimengren PythonJavaC++go 3月前

    你在upOptions方法里面又建了一个方法onscroll, 此时onscroll的this不是当前vue对象。

    简单理解就是method的中的单层方法才可以直接调用data。

    解决方法一:使用回调函数

    解决方法二:that=this

    点赞 1 评论 复制链接分享
  • jyn15159 木蓝茶陌*_* 2月前

    this的指向问题

    可以使用箭头函数,保持函数内this指向和函数外部this指向一致,都指向vue实例

    onscroll = () => {}

    点赞 1 评论 复制链接分享
  • APX456 APX456 3月前

    this应该不是一个对象

    点赞 1 评论 复制链接分享

为你推荐