[Vuejs]-How can i send methods with props in vue js? i have 2 methods in components but one of them didnt work?

by

0👍

✅

task.id

here you are passing id directly tho it should be task.id

//From
<i class="fas fa-times" @click="this.$emit('DeleteTask', id);"></i>
//To
<i class="fas fa-times" @click="this.$emit('DeleteTask', task.id);"></i>

no prop mutation

you shouldnt change prop values , any variable passed by prop shouldnt be modified , its an image of the original variable in the parent compopent , you should set up new emits in you tasks.vue -> app.vue the same way you did with task.vue -> tasks.vue

check this working sandbox

naming convention

the browser will get confused about @DeleteTask (event listener in you tasks component ) and wont link it to the event since its the sae as @deletetask for him

you already named the other one in kebab-case thats why its working

change
@click="this.$emit('DeleteTask', id);"
To @click="this.$emit('delete-task', id);"

and
@DeleteTask
To @delete-task;

Naming conventions from the Vue docs say to always name events with
kebab-case. The reason for this is that when Vue compiles its HTML,
HTML does not differentiate between upper or lowercase letters

Leave a comment