Passing the result of a Fetch function to Parent Prop

Admin 1
Viewed 91

I'm aware there is many questions about passing between Child to Parent Components, however, all the questions and guides I've seen use a Form Input to display how the $emit function works, and I have had no success in translating this to the result of an API call.

My question is, how do I refactor this code to pass the 'data' upwards into my parent components 'TranslatedText' Prop? It confuses me as I have no input, just the data response. Any tips appreciated.

ParentComponent.vue

  <template>
     <translation-button v-model="translatedText" />
    </template>

    props: {
    translatedText: '',
   },

ChildComponent.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);
      })
      .finally(() => {
        this.$emit('loadTranslations', this.TranslatedText);
        console.log('event is a success');
      });
     }
  }
}
     
</script>
vuejs2 vue-component vue.js fetch
1 Answers

there are several ways to communicate between parent and child. 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() { 
      fetch('http://localhost:3000/ccenter/cc_apis')
        .then(function(response) {
          return response.text();
        })
        .then(function(data) {
          console.log(data);
      })
      .finally((payload) => { // change added
        this.$emit('changeTitle','payload ') // change added
        console.log('event is a success');
      });
     }
  }
}
     
</script>

parent:

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

this page is a simple example related to your problem

user_115304190
Related