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>
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