VueJS将数据作为对象

时间:2017-09-07 08:22:18

标签: javascript vue.js vuejs2 vue-component

这是一个VueJS组件:

<template>
  <a @click="log">click me<a>
</template>

<script>
  export default {
    data() {
      return {
        a: "a",
        b: "something",
        foo: { bar: "baz" },
        // etc.
      }
    },
    methods: {
      log() {
        // console.log( data ); 
        // ???
      }
    }
  }
</script>

我想从data函数访问log并将其作为对象获取(就像在其声明中一样)。我知道我可以得到这样的数据:

log() {
  console.log( this.a );
  console.log( this.b );
  console.log( this.foo );
}

但我想要的是整个数据作为对象(因为我想通过事件将数据发送到父组件)。

有没有办法将整个数据对象放在组件的方法中?

2 个答案:

答案 0 :(得分:18)

您可以使用this.$data访问当前组件的数据对象。

参考:Link

所以日志功能应该是:

log() {
  console.log(this.$data.a);
  console.log(this.$data.b);
  console.log(this.$data.foo);
}

答案 1 :(得分:0)

我认为您正在寻找的是返回整个数据对象,如下所示:

log() {
  console.log(this.$data);
}