'Emit data from Child to parent vue 3
I have a SearchBar.vue child page with a form in this this code :
<template>
<div>
<form class="search-bar" @submit.prevent="SearchMovies()">
<input
type="text"
placeholder="Effectuez une recherche"
v-model="search"
/>
<button
type="submit"
class="search-input"
@click="$emit('get-movies', movies)"
>
CHERCHER
</button>
</form>
</div>
</template>
And my SearchMovies() function looks like :
setup() {
const search = ref("");
const movies = ref([]);
function SearchMovies () {
if (search.value != "") {
fetch(`${process.env.VUE_APP_API_URL_CALL_TWO}${search.value}`)
.then((response) => response.json())
.then((data) => {
movies.value = data.contents;
search.value = "";
console.log(
"Movies data from SearchBar.vue when fired up: ",
movies.value
);
});
}
this.$emit('get-movies', movies)
}
This is how I have tried to add the emit line
this.$emit('get-movies', movies)
And I receive the emitted data from SearchMovies() function to my parent Home.vue page like this :
<template>
<div>
<router-link to="/" href="/"
><img class="logo-img" alt="App logo" src="../assets/logo.png"
/></router-link>
<SearchBar @get-movies="getMovies($event)" />
<MovieList :movies="movies" />
</div>
</template>
methods: {
getMovies: function (movies) {
(this.movies = movies),
console.log("Movies data from Home.vue when fired up: ",
movies);
},
},
The problem is that I am not getting the movies data and when I console.log it in the Home.vue page
Movies data from Home.vue when fired up: Proxy {}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
