Notice we created a new isCompleted property for each task, set to false by default. We’ll do this with the v-checkbox component. The essence of creating a task is actually getting it done, so let’s show a checkbox in the list for each task that indicates its completion status. Indicating Task Completion with Checkboxes Our toolbar elevation is back, and the card containing our list stands out clearer, with the margins we’ve added. Let’s also set left, right, and bottom margins on the card component all to the same size 4:īut here’s a better and shorter way to do this:Īs you guessed correctly, the ma-4 class will set a margin of size 4 on the card in all directions.Īnd here’s how our app should look like right now: The 4 refers to one of the 32 different margin sizes in Vuetify. The m stands for margin, and the t stands for the top. Mt-4 is the margin class I was referring to. Let’s put some spacing between them, using one of Vuetify’s margin classes. The toolbar appears flat now because the card containing the task list is just right below it. Look closely at the toolbar - it’s flat! Didn’t we put some elevation on it in our last tutorial?
We need to show the note for each task, so let’s set the two-line variant: The v-list-item component in Vuetify is of three variants: single-line, two-line and three-line, of which the single-line variant is the default. Sign up here to receive the latest source code for this great app!
And then we use v-list-item-title to display the title of the list item, which in this case is the task title. To display content inside each list we use the v-list-item-content component. Using the v-for directive, we loop through tasks and show a v-list-item for each array element. We’ll show the task list using the v-list component and some other sub-components.
0 kommentar(er)
