All language subtitles for 002 Two-Way Data Binding_en

For the most part, two way data binding works exactly the same in the composition API as it does in

the Options API.

So just to demonstrate this, let's add an input to our page which allows us to modify this counter

title which we have stored in this data.

So after this dip with our counter and buttons, a lot of def with a class of edit and then inside that

I'm going to add a H for heading with the text edit counter title colon and then a lot an input save

that.

I'm just going to add a bit of margin to the top of this def, so I'll jump down to the while we're

at it.

Let's just remove all of these old comments.

And I don't see the script section.

Target the edit class, which we just added to that depth and a lot of margin top of 60 pixels and save

that and now let's bind this input to counter to this counter title ref.

So to do that, we can just jump to this input and add a V model directive and just set it equal to

this const counter title.

Counter title.

I'd say that we can now see our counter title in this import and if we change it, it's not updating

the heading up here.

Maybe we just need to refresh, try that again.

And yet if we change the heading title in this import, we see it updated in our heading up here.