What is data()?

Bruce Gust
Bruce Gust used Ask the Experts™
on
Here's my  "Articles.vue" file:

❶ <template>
	<div>
		<h2>Articles</h2>
	</div>
</template>

<script>
	❷ export default {
		❸ data() {
			return {
				articles: [], 
				article: {
					id: '',
					title: '',
					body: ''
				},
				article_id: '',
				pagination: {},
				edit: false
			}
		},
		
		❹ created() {
			this.fetchArticles();
		},
		
		methods: {
			fetchArticles() {
				fetch('api/articles')
					.then(res => res.json())
					.then(res=> {
						console.log(res.data);
					})
			}
		}
	}
</script>

Open in new window


My question revolves around bullet #3. What is "data?" I wanted to better understand the nomenclature of what I'm coding and when I googled it, I gravitated to this: https://api.jquery.com/data/. Basically, "data()" is a method. But the syntax was a little different and I wanted to make sure I was barking up the right tree.

What is data()?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Google gave you a bum steer there Bruce. It took you to the jQuery data() method (for returning a custom data attribute) rather than the Vue component data function

Refer this article for more information

https://vuejs.org/v2/guide/components.html

Specifically in the section
#data Must Be a Function

Instead, a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object:
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Hey Bruce,

Basically, the data property of a Vue instance set's the properties of that Vue instance, and those properties can be accessed by and bound to the component:

<div id="myApp">
    <h1>Hello {{ name }}</h1>
</div>

new Vue({
    el : '#myApp',
    data : {
        name: 'Chris'
    }
});

Open in new window

In the single instance example above, you'll see that the value of the data property is just an object (which has a single property called name). When you're building re-usable components, your data property needs to be a function that returns an object. This is so that each instance (copy) of your component has access to it's own copy of the data (otherwise changing a property value on one instance would change the value on all instances!)

The syntax you've used above is just shorthand for the following:

export default {
    data : function() {
        return {
            prop1 : "Some Value",
            prop2 : "Another Value",
        }
    },

Open in new window

The longer version of the code makes it a little clearer that the data property is actually a function, and that function returns an object.
Bruce GustPHP Developer

Author

Commented:
Excellent, gentlemen!

Thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial