vuejs Props are readonly

Question

I'm new to Vue and learning Vuejs 3. I have a list of tasks. I want show that list and a span at the end of each line, so the line gets deleted by clicking on that span.

I have this code for createApp:

const babies = Vue.createApp({
    data(){
        return{
            tasks:[
                {id: 0,kid:'Sabina',tache:'eductate'}
                {id: 1,kid:'Henry',tache:'listen'}
           ]
        }
    },
    components:{
        'listbabies':Compodeux
    },
    methods:{
        supprimer(ido){
            this.tasks = Object.values(this.tasks).filter(item => item.id !== ido)
        }    
    }
})

and the component contains this:

const Compodeux=('listbabies',{
    props:{
        tasks:{
            type: Object
        },
        suppr:{
            type: Function
        }
    },
    data(){
        return{
            line:"line_" + this.tasks.id
        }
    },
    template:
        `<div :id=this.ligne>
            <div id="ligne_credits">
                <span> {{tasks.kid}} </span>
                <span> {{tasks.tache}} </span>
                <span  @click="$emit(this.supprimer(taches.id))" :id="taches.id"> [*] </span>
            </div>
        </div>
        `
})

All this code works fine, but for the @click in the component template. I get an error message: this.supprimer is not a function

Answer 1

Use a custom event by defining the name in the emit function.

@click="$emit('supprimer', taches.id)

And then you need to catch the event in the parent components template.

<template>
  <MyChildComponent @supprimer="supprimer" />
</template>

For more details, check the docs.