Emit not working

Asked

Viewed 73 times

-1

code

father:

<template>
  <div class="col-6">   
    <span @changeTitle="changeTitle($event)"> table -[{{title}}]</span><br>
    <ModalRegistert />

  </div>
</template>

<script>
  import ModalRegister from './ModalRegister';

  export default {
    data: () => ({
      title: "asdf"
     }),
    methods: {
      changeTitle: function(newTitle) {
        this.title = newTitle,
        console.log("updateTitle - table");
      }
    },
    components: {
      ModalRegister
    }
  }
</script>

son:

<template>
  <div>
    <span>modal - [{{title}}]</span>
    <v-btn x-small @click="changeTitle"> add </v-btn><br>
  </div>
</template>


<script>
  export default {
    data: () => ({
      title: "asdf"
    }),

    methods: {
      changeTitle() {
        console.log("01 - register");
        this.title = "new"
        this.$emit('changeTitle', "title")
      }
    },
  }
</script>

But it only prints in the log the Register(son), and does not change the title of the parent

vue.js

1 answer

0

Good morning buddy,

Make the following change to the parent component.

<span @changeTitle="changeTitle(title = $event)"> table -[{{title}}]</span><br>

Make the following change to the child component:

this.$emit('changeTitle', this.title)

This link has an example of Emit, in a very simple way. https://codesandbox.io/embed/laughing-matsumoto-pczvf

I also took your component and changed it a bit to work $Emit. I made an example of it here: https://codesandbox.io/embed/vue-template-r5qxz

I hope it helps you. Hug!

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.