All language subtitles for 003 Reactive Objects_en

We can see that refs are handy for storing simple independent items of data such as a number or a string,

or maybe an array or a boolean.

But what if we want to store a bunch of different data that's related together in a single object,

a bit like we did with the data method in Options API?

Well, we can do that with a reactive object.

So let's say we want to store a counter about counter title together in a single object.

Since this data is related, then we can do that with a reactive object.

So to set up a reactive objects, we can create a const or we can use a variable and we give that name

so we could call that counter data and we set that equal to the reactive method.

We do need to import this from view.

So we can just add that to our import object here reactive and we can just pass an object into this

reactive method.

Now we can place all of our data properties in here.

So let's create a property called count for our count to give that an initial value of zero.

And then without a property called title for the title, I will set that to my counter.

Save that.

Let's use the data from this reactive object in our template instead of the data from these refs.

So if we want to use the counter that's in this reactive objects here, we can just do counter data

dot count.

And if we want to use the title, it's in the reactive objects.

And we can just change this in this heading type to counter data dot title.

Let's update this V model as well to use this reactive object.

So I'll set this V model to counter data, Dot's title and I'll save that and reload.

Let's see if our title sucks up.

Okay.

Yeah.

That's still working on the two way data binding.

Still working as well on a counter is working.

We could see zero displayed there.

And if I change the value of counter data accounts, we can see it.

Update.

However, these buttons are not working and that's because these methods, the increase counter method

and the decrease counter method are still manipulating this ref and not this count that's in our active

object.

So let's update these methods.

So instead of counter dot value plus plus, we can just two counts of data, dot counts, plus plus.

And then in the decrease counter method, we can just do counter data dot count, minus, minus.

Note that we don't need to use dot value when we're using data that's in reactive objects.

We just use the straight property name counter data accounts.

Now let's say that and see if these buttons are working.

And yet that's working again now.

Okay.

So we're no longer using these refs anymore.

Our base coach shows us that by graying these out a little bit.

So let's just comment these out.

And since we no longer using this method from view, we can remove that from this import statement like.

So save the.