0

I'm new in vuejs, I want to show tab data from from sibling component, below is my code. Please help!!

I could toggle the tab but unable to show data from sibling component

`

<template>
  <div>
    <section>
      <div>logo</div>
      <tabs></tabs>
      <div>right menu</div>
    </section>
    <tabs-data></tabs-data>
  </div>
</template>

<script>
export default {
  components: {
    'tabs': {
      template: '<div><a href="#" v-on:click="checkClass()" v-bind:class="{ active: ist1 }">tab1</a><a href="#" v-on:click="checkClass()" v-bind:class="{ active: ist2 }">tab2</a></div>',
      data () {
        return {
          ist1: true,
          ist2: false
        }
      },
      methods: {
        checkClass: function () {
          this.ist1 = !this.ist1
          this.ist2 = !this.ist2
        }
      }
    },
    'tabs-data': {
      template: '<section><p v-if="ist1">Tab Data 1</p><p v-else>Tab Data 2</p></section>'
    }
  }
}
</script>

`

Balram Sharma
  • 119
  • 1
  • 3
  • 15
  • See this question here: https://stackoverflow.com/questions/38616167/communication-between-sibling-components-in-vuejs-2-0 – skribe Dec 02 '17 at 08:12
  • Appreciate your early response, if you could share the jsfiddle.net example, it would be life saver for me. – Balram Sharma Dec 02 '17 at 14:20

1 Answers1

0

You can add a "bridge" in parent for events. I don't know if it is a good way

events : {
    'bridge'( e, ...args ) {
        // $broadcast would not trigger the events in parent, add $emit if you want parent itself can also detect the event.
        this.$emit( e, ...args );
        this.$broadcast( e, ...args ); 
   }
}

and dispatch event in components with the bridge

this.$dispatch( 'bridge', 'real-event-name', params );
Yunus Hatipoglu
  • 609
  • 1
  • 6
  • 20