Home » vue » how to move items to another component by click – vue.js

how to move items to another component by click – vue.js

Posted by: admin November 26, 2021 Leave a comment

Questions:

I was wondering how can I move my items -> book, from one component to another. I took this books from api and I show them in the list, so I have an ID.

<template>
<v-flex v-for="(book, index) in allBooks">
 <div>Title: {{ book.title }}</div>
 <i @click="markAsFavorite(book)" :class="{isActive: isMark}" class="fas fa-heart"></i>
</template>

//component books

<script>
  name: 'Books',
   data () {
     return {
      allBooks: [],
      isMark: false,
      favouriteBooks: []
    }
 },

  mounted() {
    axios.get("https://www.googleapis.com/books/v1/volumes?q=id:" + this.id)
        .then(response => {
            console.log(response)
            this.allBooks = response.data.items.map(item => ({...item, isMark: false}))
            console.log(this.allBooks)
        })
        .catch(error => {
            console.log(error)
        })
  },

   methods: {       
     markAsFavorite(book) {
       this.isMark = !this.isMark
       let favouriteAllBooks = this.favouriteBooks.push(book => { 
        book.id = // i dont know what?
    })
   },
  }
</script>

//component favourite

<template>
    <div class=showFavouriteBook>
      <p></p>
    </div>

</template>

I tried to compare this marked book ID to something, and then this array with marked books show in second template favourite. But I have no idea how to do this. Maybe somebody can prompt me something?

Answers:

You should use a global eventBus for that. An ‘eventBus’ is another instance of Vue which is used to pass data via components tied to the main application.

At the root script of your application append the following:

const eventBus = new Vue({
    data: function() {
        return {
            some_var: null,
        }
    }
});

You can use Vue mixin to have your event bus accessible globally easily:

Vue.mixin({
    data: function() {
        return {
            eventBus: eventBus,
        }
    }
});

Now when you want to pass data between components you can use the bus:

Component 1

// for the sake of demo I'll use mounted method, which is invoked each time component is mounted
<script>
    export default {
        mounted: function() {
            this.eventBus.some_var = 'it works!'
        }
    }
</script>

Component 2

<template>
    <div>
        {{ eventBus.some_var }} <!-- it works -->
    </div>
</template>

In addition you can use $emit and $on.

Component 1

// for the sake of demo I'll use mounted method, which is invoked each time component is mounted
<script>
    export default {
        mounted: function() {
            // emit 'emittedVarValue' event with parameter 'it works'
            this.eventBus.$emit('emittedVarValue', 'it works!')
        }
    }
</script>

Component 2

<template>
    <div>
        {{ some_var }} <!-- "it works" once eventBus receives event "emittedVarValue" -->
    </div>
</template>
<script>
    export default {
        data: function() {
            return {
                some_var: null
            }
        },

        mounted: function() {
            // waiting for "emittedVarValue" event
            this.eventBus.$on('emittedVarValue', (data)=>{
                this.some_var = data;
            })
        }
    }
</script>

Hope this answer helps you.