Integrating strike-through the list on its click or on selecting checkbox in to-do-list app? - vuejs2

Question

I am creating a demo of todolist app and I want to strike-through the list on click of list or selecting particular checkbox. Here is my code:
<div v-for="(item, index) in toDoList" :key="index">
<v-checkbox v-model="item.status"></v-checkbox>
<textfield>{{item.title}}</textfield>
</div>
where status is having a boolean value.

Answer 1

If you want your <textfield> to be responding to click events, a small change to your markup is required:
<v-checkbox
:label="item.title"
v-model="item.status"
></v-checkbox>
And then you can add this additional style to your stylesheet to target the <label> element of a checked checkbox:
.input-group--active label {
text-decoration: line-through;
}
new Vue({
el: '#app',
data: {
toDoList: [
{ title: 'Lorem', status: null },
{ title: 'ipsum', status: null },
{ title: 'dolor', status: null },
{ title: 'sit', status: null },
{ title: 'amet', status: null }
]
}
});
.input-group--active label {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<!-- Vuetify dependencies -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.14/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.14/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<div id="app">
<div
v-for="(item, index) in toDoList"
:key="index">
<v-checkbox
:label="item.title"
v-model="item.status"
></v-checkbox>
</div>
</div>
An alternative solution is simply adding a custom class to your checked elements using :class binding, e.g.:
<div
v-for="(item, index) in toDoList"
:key="index"
:bind="{ 'is-selected': item.status' }">
And for your CSS:
.is-selected label {
text-decoration: line-through;
}
Note that since text-decoration is not inheritable, using .is-selected { text-decoration: line-through; } will not work. You will have to select for the descendant <label> element.
new Vue({
el: '#app',
data: {
toDoList: [
{ title: 'Lorem', status: null },
{ title: 'ipsum', status: null },
{ title: 'dolor', status: null },
{ title: 'sit', status: null },
{ title: 'amet', status: null }
]
}
});
.is-selected label {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<!-- Vuetify dependencies -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.14/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.14/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<div id="app">
<div
v-for="(item, index) in toDoList"
:key="index"
:class="{ 'is-selected': item.status }">
<v-checkbox
:label="item.title"
v-model="item.status"
></v-checkbox>
</div>
</div>