Recently, I started delving into Vue and encountered some challenges with passing events across different components. Currently, I'm working on a basic todo list application which allows users to add new tasks and delete existing ones. You can check out the repository for this project at https://github.com/Polenj86/vue-taskmanager.
The app's tree structure is as follows:
-root //App.vue
-- childcomponent // NewTask.vue
-- childcomponent // TasksWrapper.vue
-- grandchildcomponent //Task.vue
My goal is to incorporate a button within Task.vue that enables me to delete a task from the root's tasks array. So far, I have only been able to achieve task deletion by clicking on the entire element using this method:
<app-component @click.native="deleteTask"></app-component>
methods: {
deleteTask(index) {
this.tasks.splice(index, 1)
}
}
I am aiming to assign this delete functionality to the button inside the component rather than the entire component itself.
This is the code snippet for the grandchildren component:
<template lang="pug">
.panel.panel-default
.panel-body
slot(name="task-content")
.panel-footer
button.btn.btn-sm.btn-primary(@click="deleteTask") Delete task
</template>
How should I communicate to the root that I want to initiate a delete action? I attempted to utilize an event emitter but I am unsure about what should be passed as the second argument in the emitter.
export default {
methods: {
deleteTask() {
this.$emit('taskWasDeleted', ???);
}
}
}
Any assistance would be greatly appreciated.