If you change the value of the label prop passed into the <to-do-item></to-do-item> call in your App component, you should see it update. This is great. We have a checkbox, with an updatable label. However, we’re currently not doing anything with the “done” prop — we can check the checkboxes in the UI, but nowhere in the app are we recording whether a todo item is actually done.

To achieve this, we want to bind the component’s done prop to the checked attribute on the <input> element, so that it can serve as a record of whether the checkbox is checked or not. However, it’s important that props serve as one-way data binding — a component should never alter the value of its own props. There are a lot of reasons for this. In part, components editing props can make debugging a challenge. If a value is passed to multiple children, it could be hard to track where the changes to that value were coming from. In addition, changing props can cause components to re-render. So mutating props in a component would trigger the component to rerender, which may in-turn trigger the mutation again.

To work around this, we can manage the done state using Vue’s data property. The data property is where you can manage local state in a component, it lives inside the component object alongside the props property and has the following structure:

Read more: What does 2 inches of hair look like

You’ll note that the data property is a function. This is to keep the data values unique for each instance of a component at runtime — the function is invoked separately for each component instance. If you declared data as just an object, all instances of that component would share the same values. This is a side-effect of the way Vue registers components and something you do not want.

You use this to access a component’s props and other properties from inside data, as you may expect. We’ll see an example of this shortly.

So let’s add a data property to our ToDoItem component. This will return an object containing a single property that we’ll call isDone, whose value is this.done.

Update the component object like so:

Read more: Omgchat com

Vue does a little magic here — it binds all of your props directly to the component instance, so we don’t have to call this.props.done. It also binds other attributes (data, which you’ve already seen, and others like methods, computed, etc.) directly to the instance. This is, in part, to make them available to your template. The down-side to this is that you need to keep the keys unique across these attributes. This is why we called our data attribute isDone instead of done.

So now we need to attach the isDone property to our component. In a similar fashion to how Vue uses {{}} expressions to display JavaScript expressions inside templates, Vue has a special syntax to bind JavaScript expressions to HTML elements and components: v-bind. The v-bind expression looks like this:

v-bind:attribute=”expression”

In other words, you prefix whatever attribute/prop you want to bind to with v-bind:. In most cases, you can use a shorthand for the v-bind property, which is to just prefix the attribute/prop with a colon. So :attribute=”expression” works the same as v-bind:attribute=”expression”.

So in the case of the checkbox in our ToDoItem component, we can use v-bind to map the isDone property to the checked attribute on the <input> element. Both of the following are equivalent:

Read more: Come home game guide

You’re free to use whichever pattern you would like. It’s best to keep it consistent though. Because the shorthand syntax is more commonly used, this tutorial will stick to that pattern.

So let’s do this. Update your <input> element now to include :checked=”isDone”.

Test out your component by passing :done=”true” to the ToDoItem call in App.vue. Note that you need to use the v-bind syntax, because otherwise true is passed as a string. The displayed checkbox should be checked.

Try changing true to false and back again, reloading your app in between to see how the state changes.