CODEWITHSUNDEEP
javascriptvue.jseventsnuxt.js
sangio90
sangio90

Reputation: 179

Vue, multiple instances of same component handling events in some strange way

I'm trying to use two instances of the same components. I implemented two methods which should be called when one of the two instances emit an event. The only difference between the two instances is that instance1 should call method1 and instance2 should call method2.

It happens that method1 is always called, no matter which components emits the event.

Am I missing something?

Here a short example of what I'm doing

CustomComponent

<template>
....// Some code that at a certain point calls myMethod
</template>
<script>
export default {
  methods: {
    myMethod () {
      this.$emit('picture-taken')
    }
  }
}
</script>

Page where I'm using CustomComponent

<template>
  <custom-component @picture-taken="func1" />
  <custom-component @picture-taken="func2" />
</template>

<script>
export default {
  methods: {
    func1() {
      debugger
      //It always ends up here
    },
    func2() {
      debugger
    },
  }
}
</script>

Upvotes: 0

Views: 5296

Answers (1)

kissu
kissu

Reputation: 46814

This kind of code works for your use-case.

parent page

<template>
  <div>
    <child :id="1" @picture-taken="callSpecificFunction"></child>
    <child :id="2" @picture-taken="callSpecificFunction"></child>
  </div>
</template>

<script>
export default {
  auth: false,
  methods: {
    callSpecificFunction(id) {
      console.log('id emitted', id)
      this[`function${id}`]()
    },
    function1() {
      console.log('function1 called')
    },
    function2() {
      console.log('function2 called')
    },
  },
}
</script>

Child.vue

<template>
  <button @click="emitPlease">please do emit for id {{ id }}</button>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    emitPlease() {
      this.$emit('picture-taken', this.id)
    },
  },
}
</script>

Upvotes: 3

Related Questions