VueJS get data as object

Question

Here is a VueJS component:

<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>

I want to access the data from the log function and get it as an object (just like in its declaration). I know I can get data like this :

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

But what I want is the whole data as an object (because I want to send the data via an event to a parent component).

Is there a way to get the whole data object inside a method of a component?

tony19 · Accepted Answer · 2022-07-15 19:46:13Z

51

You can access the current component's data object using this.$data.

Reference: Link

So the log function should be like:

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

edited Jul 15, 2022 at 19:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 7, 2017 at 8:33

Shubham Patel

3,3091 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cornernote · Accepted Answer · 2019-10-28 07:46:51Z

8

I think what you are looking for is to return the whole data object, like this:

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

answered Oct 28, 2019 at 7:46

cornernote

1,1051 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

VueJS get data as object

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related