[Vuejs]-Pass an array between two sibling components

by

0👍

You could make the parent be the source of truth. What I mean is when a new QR code is created, the child $emits the new value to the parent, who then stores it in an array.

Once the parent holds the information it is easy for it to distribute it to all of its children.

0👍

Try the following snippet:

Vue.component('home',{
  template: `<div>
    <h2>Home Component</h2>
    <button @click="sendQrCode">Check</button>
  </div>`,
  methods:{
    sendQrCode:function(){
      this.$root.$emit("codeSent",["code1","code2","code3"]);
    }
  }
});

Vue.component('history',{
  template: `<div>
    <h2>History Component</h2>
    {{ codes }}
  </div>`,
  data:function(){
    return {
      codes:null
    }
  },
  created(){
    let that = this;
    this.$root.$on("codeSent",(payload)=>{
      that.codes = payload;
    })
  }
  
});

new Vue({
  el:"#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<html>
  <body>
    <div id="app">
      <home></home>
      <hr />
      <history></history>
    </div>
  </body>
</html>

Leave a comment