CODEWITHSUNDEEP
vue.jsvue-component
Alex T
Alex T

Reputation: 3754

Click button in child component to pass data to parent (via one other child)

Is it possible to pass data by clicking on the button in nested child component, pass it to anoter child component that is level above and then to parent component?

My components are nested this way:

Parent
----Child
---------Child 2 (with the button that should trigger action)

So Child 2 look like this:(I added the addList() method that should push the variable to the list that is in the parent)

<template>
  <li class="movie">
<div class="movie__image">
  <img class="movie__poster" :src="imageURL" :alt="movie.Title"/>
  <button class="movie__more" :href="`https://www.imdb.com/title/${movie.imdbID}`" target="_blank">Add</button>
</div>
  </li>
</template>
<script>
export default {
  name: 'movie-list-item',
  props: {
    movie: {
      type: String,
      required: true
    }
  },
  methods: {
    addList(event) {
      this.$emit('clicked', this.movie.imdbID)
    }
  }
 </script>

Child 1

<template>
  <ul class="grid">
  <movie-list-item li v-for="movie in movies" :movie="movie" :key="movie.imdbID" />
</ul>
</template>

<script>
import MovieListItem from './MovieListItem'

export default {
  name: 'movie-list',
  components: {
    MovieListItem
  },
  props: {
    movies: {
      type: Array,
      required: true
    }
  }
}
</script>

Parent:(I want to push the item from child 2 component to picked list.

<template>
   <div>
    <movie-list :movies="movies"></movie-list>
  </div>
</template>
<script>
import MovieList from './components/MovieList'

export default {
  name: 'app',
  components: {
    MovieList,
  },
  data () {
    return {
      show:false,
      movies: [],
      picked:[]
    }
  }
</script>

Upvotes: 0

Views: 1742

Answers (1)

Sebastian Bergl&#246;nn
Sebastian Bergl&#246;nn

Reputation: 4278

Without using any kind of state management, you'll have to emit two time.

Otherwise, you can use Vuex and have a state management.

Child1

<template>
  <ul class="grid">
    <movie-list-item li v-for="movie in movies" :movie="movie" :key="movie.imdbID" @clicked="handleClick(movie.imdbID)" />
  </ul>
</template>

<script>
import MovieListItem from './MovieListItem'

export default {
  .....
  methods: {
    handleClick(imdbID) {
      this.$emit("clicked", imdbID);
    }
  }
}
</script>

Parent

<template>
   <div>
    <movie-list :movies="movies" @clicked="handleClick($event)"></movie-list>
  </div>
</template>
<script>
import MovieList from './components/MovieList'

export default {
 ...
 data () {
    return {
      show:false,
      movies: [],
      picked:[]
    }
  },
  methods: {
    handleClick(imdbID) {
      this.picked.push(imdbID);
    }
  }
</script>

Upvotes: 2

Related Questions