How to emit events when using multiple balloon

[minhtudapp]

I tried using events (written on the document) in multiple balloon (Ex: <template scope="balloon" @click="..."...) but it doesn't work. Is there anyway to solve the problem?

[kevinwarne]

Hmm not a perfect solution, but you should be able to add a nested element in the template and listen for events there. e.g.

<template scope="balloon">
  <div @click = 'doSomething'>
    Balloon Content
  </div>
</template>

Another option, albeit a bit more involved, is to listen for a click on the entire balloon set. Then you can reference the set to see which balloon is maximized if there is one.

<template>
    <balloon-set
      position = 'bottom-right'
      :balloons = 'balloons'
      @click.native = 'balloonSetClicked'
      ref = 'balloonSet'
    >
      <template scope = 'balloon'>
        Some Content Here
      </template>
    </balloon-set>
  </div>
</template>

<script>
  import { BalloonSet } from '../src/index'

  export default {
    components: {
      BalloonSet
    },

    data () {
      return {
        balloons: [
          /* Some balloon objects here */
        ]
      }
    },

    methods: {
      balloonSetClicked () {
        console.log(this.$refs.balloonSet.maximizedBalloon)
      }
    }
  }
</script>

Hope this helps! Cheers.

[minhtudapp]

Works! Thanks!