Используйте компонент Vuetify hover и кнопку со значком, чтобы добавить в приложение функцию удаления задачи.
Добро пожаловать в нашу продолжающуюся серию руководств, в которой мы собираемся создать великолепное приложение для списка дел от начала до конца, используя Vuetify и Vue JS. В прошлый раз мы узнали, как использовать FAB, диалоги и элементы управления формами, чтобы дать пользователям возможность создавать новые задачи в приложении. Сегодня мы добавим функционал для удаления задач.
Только начинаете работать с Vuetify? Ознакомьтесь с этой статьей.
Использование v-hover для изменения внешнего вида при наведении
Прежде чем включить удаление задачи, нам нужно узнать, как изменить визуальное состояние элемента списка, представляющего задачу, при наведении на него курсора (скоро вы поймете, почему). При наведении мыши мы изменим цвет элемента списка. Vuetify позволяет нам сделать что-то подобное, используя компонент v-hover:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
</v-toolbar>
</v-card>
<v-card class="ma-4" v-show="tasks.length > 0">
<v-list>
<v-hover v-slot="{ hover }">
<v-list-item
v-for="(task, index) in tasks"
:key="index"
v-bind:class="{
'task-completed': task.isCompleted,
'grey lighten-2': hover,
}"
two-line
>
<v-checkbox
hide-details
v-model="task.isCompleted"
class="mt-0 mr-2"
></v-checkbox>
<v-list-item-content>
<v-list-item-title>{{ task.title }}</v-list-item-title>
<v-list-item-subtitle>{{ task.note }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-hover>
</v-list>
</v-card>
...
</v-app>
</template>
...
v-hover предоставляет переменную hover через слот по умолчанию, значение которой изменяется в зависимости от того, находится ли дочерний элемент v-hover в данный момент или нет. Здесь мы используем классы grey и lighten-2 для изменения цвета фона элемента списка, представляющего задачу, при наведении курсора мыши.
Отображение кнопки со значком при наведении
Итак, для каждой задачи мы будем отображать кнопку со значком, нажатие на которую приведет к ее удалению:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
</v-toolbar>
</v-card>
<v-card class="ma-4" v-show="tasks.length > 0">
<v-list>
<v-hover v-slot="{ hover }" v-for="(task, index) in tasks" :key="index">
<v-list-item
v-bind:class="{
'task-completed': task.isCompleted,
'grey lighten-2': hover,
}"
two-line
>
<v-checkbox
hide-details
v-model="task.isCompleted"
class="mt-0 mr-2"
></v-checkbox>
<v-list-item-content>
<v-list-item-title>{{ task.title }}</v-list-item-title>
<v-list-item-subtitle>{{ task.note }}</v-list-item-subtitle>
</v-list-item-content>
<v-btn plain v-if="hover"><v-icon>mdi-delete</v-icon></v-btn>
</v-list-item>
</v-hover>
</v-list>
</v-card>
...
</v-app>
</template>
...
Получите исходный код этого приложения
Зарегистрируйтесь здесь, чтобы получить последний исходный код этого замечательного приложения!
Удаление задачи по нажатию кнопки
Чтобы удалить задачу, мы воспользуемся методом массива JavaScript filter on tasks, чтобы создать новый массив, исключающий удаляемую задачу, а затем установим для него значение tasks:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
</v-toolbar>
</v-card>
<v-card class="ma-4" v-show="tasks.length > 0">
<v-list>
<v-hover v-slot="{ hover }" v-for="(task, index) in tasks" :key="index">
<v-list-item
v-bind:class="{
'task-completed': task.isCompleted,
'grey lighten-2': hover,
}"
two-line
>
<v-checkbox
hide-details
v-model="task.isCompleted"
class="mt-0 mr-2"
></v-checkbox>
<v-list-item-content>
<v-list-item-title>{{ task.title }}</v-list-item-title>
<v-list-item-subtitle>{{ task.note }}</v-list-item-subtitle>
</v-list-item-content>
<v-btn plain v-if="hover" @click="deleteTask(task.id)"
><v-icon>mdi-delete</v-icon></v-btn
>
</v-list-item>
</v-hover>
</v-list>
</v-card>
...
</v-dialog>
</v-app>
</template>
<script>
...
export default {
...
methods: {
...
newTaskFormSubmit() {
if (this.$refs.form.validate()) {
this.tasks.push({
id: v4(),
title: this.newTask.title,
note: this.newTask.note,
isCompleted: false,
});
this.showNewTaskDialog = false;
this.$refs.form.reset();
}
},
deleteTask(id) {
this.tasks = this.tasks.filter((task) => task.id !== id);
},
},
};
</script>
...
И теперь нажатие кнопки значка удаления удалит задачу из списка, так как вы можете подтвердить, что следовали за ней.
Продолжение следует…
Сегодня мы добились большего прогресса в создании нашего приложения для списка дел. Мы узнали, как использовать компонент v-hover Vuetify для изменения внешнего вида элемента в зависимости от его текущего состояния наведения. Мы использовали реквизит слота hover, чтобы отобразить кнопку со значком, которая запускала удаление задачи при нажатии.
Оставайтесь с нами для нашего следующего эпизода, так как вместе мы создаем это приложение со списком дел от начала до конца, используя эту фантастическую структуру Material Design.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
