Vue 'data' Option


Example

Using a data property inside the data option to hold a message.

export default {
  data() {
    return {
      msg: 'Hello World!'
    };
  }
};
Run Example »

Definition and Usage

The data option is a function that returns an object with all the data properties inside.

The object returned by the data function can be accessed with this.$data, and a specific data property 'count' can be accessed with this.$data.count, or simply this.count.

Data properties with a name that starts with $ or _ must be accessed through the this.$data object, they cannot be accessed otherwise.

It is possible to add new data properties after the application has started running, by using this.$data, but it is not recommended.


Related Pages

Vue Tutorial: Vue Introduction

Vue Reference: Vue $data Object


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.