Pass data from child to parent component with click event(data) in Vue

Question

i need pass data (a slug) from a @click button to a function with $emit event, and then in the Parent component recive this and embebed in another component as a prop, to load a simple object.

This is my approach, but did not work

<-- Child Component (Conversaciones.vue) -->

  <template v-slot:title>
     <q-btn @click="SlugHijoPadre(conversacion.slug)">
     {{ conversacion.contenido }}
     </q-btn>
  </template>

  methods:{ 
    SlugHijoPadre(Slugdata) {
       this.$emit("enviar-conversacion", {
       slug: Slugdata 
  })}}

<-- Parent Component -->

  <Conversaciones @enviar-conversacion="slugConversacion"/>

  components: {
    Conversaciones,
    Conversacion
  },

  data() {
    return {
      slugs: {}
    };
  },

  methods: {

    slugConversacion(slug){
      this.slugs.push (slug);
      console.log(slug);
    }
  },

//And finally pass a property to call an especific object of another component:

  <Conversacion :slug="slugs"></Conversacion>

Answer 1

Check your slugs property, it's an object not an array so you can't use this.slugs.push. Change it to slugs: []