All language subtitles for 002 Options API - Data & Methods_en

Let's set up some data and methods to get this up working using the options API.

So we need to add a script section and inside that we need to add our export defaults.

Let's set up our data first for this counter.

So we need to add a data method which returns an object and we could pull all of our data properties

in here.

So a lot of property called counts are set up to zero.

Save that and we should be able to use that in our template now.

So we'll get rid of this zero, add double curly braces and we'll just put counter in here and save

that.

And if I change this now, we should see it update in the template which we do.

I'll set that back to zero.

And now let's set up some methods for increasing and decreasing this counter.

So I'm going to click convert to this button, this plus button.

So I'll click because we'll find a method called increase counter.

Let's create this method.

So after our data method, a lot of comma and we need to add our methods object and we'll create this

method increase counter and all we want to do is increase this counter property by one.

So to access our data properties we can just do this dot and then counter and we can just do plus plus

to increase it by one.

I'll save that and let's see if that's working yet.

We can increase the counter.

So now we just need a method to decrease the counter.

So a lot of comma here and I'll duplicate this method, rename it to decrease counter.

Just change the code to this account to minus minus to decrease this counter property.

And then I'll copy this click handler from the plus button and add it to the minus button.

I'll just change the method name to decrease counter and save that we can now increase or decrease our

counter.