vue2 中 data 数据定义为 data的数据时, 方法里会取不到data?

作者站长头像
站长
· 阅读数 23

vue2(2.16.14) 中 data 数据定义为 data(this.xxx)的数据时, 方法里会取不到data?

这是一个有趣的问题,我暂时还没有去探究原因,不过可以给大家避坑。

我有个 test.vue 组件

<template>
  <div class="test">
  </div>
</template>
<script>

export default {
  name: 'test',
  data () {
    return {
      tabList: [{
        label: '哈哈哈', value: 'hahaha'
      }, {
        label: '嘿嘿嘿', value: 'heiheihei'
      }],
      tab: this.tabList[0].value,
    }
  },
  created() {
    console.log(this.tabList);
    this.show("created");
  },
  methods: {
    show(form) {
      console.log(`来自 ${ form }-- show被调用: `, this, 'tabList: ', this.tabList, 'tab: ',this.tab, 'method: ', this.test);
    },
    test() {
      console.log(1111);
    }
  }
}
</script>
<style scoped lang="scss">
</style>

我在其父组件中通过 this.$refs.test.show('父组件') 调用该方法时发现 this.data 为undefined,后面发现组件自身调用也存在这个问题。vue2 中 data 数据定义为 data的数据时, 方法里会取不到data?

vue2 中 data 数据定义为 data的数据时, 方法里会取不到data?

然而方法却能取到,暂时做个记录(如有大佬帮忙解开迷雾,十分感谢。

回复
1个回答
avatar
test
2024-06-20

this指的是什么?是不是当前vue实例?this.tabList指的是什么?是不是data()returntabList属性?在还没return的对象里访问对象中的属性会怎样?会收获undefined is not an object (evaluating 'this.tabList[0]')报错一枚。这与vue无关,你的行为就好似下面这段JS:

var data = {
    tabList: [{
      label: '哈哈哈', value: 'hahaha'
    }, {
      label: '嘿嘿嘿', value: 'heiheihei'
    }],
    tab: data.tabList[0].value
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容