Passing data from a Child Component to the Parents Pop in VueJs-CodePudding

I have a button component which calls an API, and I want to push the returned response up to the parent, where it will become the 'translatedText' prop, however, I believe I'm using the $emit incorrectly, due to the error: `Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$emit'). How do I best capture the response data and pass it to my parent prop, and is using $emit the best use in this instance?

TranslationButton.vue

    <template>
  <b-button type="is-primary" @click="loadTranslations()">Übersetzen</b-button>
</template>

<script>
export default {
  name: "TranslationButton",

  props: {
   translatedText: ''
  },

  methods: {
     loadTranslations() { 
      fetch('http://localhost:3000/ccenter/cc_apis')
        .then(function(response) {
          return response.text();
        })
        .then(function(data) {
          console.log(data);
          this.$emit('translatedText', this.data);
          console.log(data)
        })
      },
  },
};
</script>

Parent Component Props:

 props: {
    data: Array,
    translatedText: '',
    showAttachments: {
      type: Boolean,
      default: false,
    }

  },

How Child Component is called in Parent Component:

  <translation-button  @translatedText="loadTranslations()" />

CodePudding user response：

Best practise when passing data from child to parent is emitting events.

this.$root.$emit('translatedText', this.data);

than

this.$root.$on('translatedText', () => { // do stuff })

CodePudding user response：

by emits you pass value to parent component, @translatedText="loadTranslations()" - its event listner, fireing on your child comp emit

do @translatedText="loadTranslations" instead of @translatedText="loadTranslations()"

and add this loadTranslations as a method to parent comp

BTW

if you dont use arrow funcs, and you use this.data it's pointing to object passed to .then, it will be undefined i guess...

CodePudding user response：

The problem is with the usage of this. It does no longer point to your component inside the promise then() method. You should create a new variable and initialize it with the value of this and use that variable to emit the event.

E.g.

loadTranslations() {
  const _this = this;
  fetch().then(response => _this.$emit(response));
}

CodePudding user response：

if you want to pass data from child to parent, you need to use $emit like the below code

child:

    <template>
      <b-button type="is-primary" @click="loadTranslations()">Übersetzen</b-button>
    </template>
    
<script>
export default {
  name: "TranslationButton",

  props: {
    TranslatedText: ''
  },

  methods: {
     loadTranslations() {
      const self= this; // change added
      fetch('http://localhost:3000/ccenter/cc_apis')
        .then(function(response) {
          return response.text();
        })
        .then(function(data) {
          console.log(data);
          self.$emit('changeTitle', data) // change added
      })
  }
}
     
</script>

parent:

<template>
 <translation-button @changeTitle="ChangeT" />
</template>
......
methods:{
 ChangeT(title)
  {
   console.log(title)
  },
}