CODEWITHSUNDEEP
javascriptvue.jsvue-component
dayo
dayo

Reputation: 106

IS there an easy way to call a method from one component in vue to another

I have two components, App.Vue and CoinList.vue, but I'm having some problems calling a method, here's the code:

snippet of App.vue

<q-list>
        <q-item clickable v-close-popup @click="cct">
           <q-item-section avatar>
          ₦
        </q-item-section>

        <q-item-section>NAIRA</q-item-section>
        </q-item>

        <q-item clickable v-close-popup @click="changeToUsd()">
           <q-item-section avatar>
          $
        </q-item-section>

        <q-item-section>USD</q-item-section>
        </q-item>

        <q-item clickable v-close-popup @click="changeToEur()">
          <q-item-section avatar>
          €
        </q-item-section>

        <q-item-section>EUR</q-item-section>
        </q-item>
      </q-list>

snippet of CoinList.vue

methods: {
    getCoinsData: function () {
     ...
    },
    changeToNgn: function () {
    ...
    },
    changeToUsd: function () {
     ...
    },
    changeToEur: function () {
    ...
    },
  },

I want the click event in App.vue to call the function in CoinList.vue but it seems not to be working. I read somewhere about the event bus but I just couldn't seem to get the hang of it, If there's anyway I could be helped, I'll really appreciate it.

Upvotes: 0

Views: 57

Answers (1)

Anatoly
Anatoly

Reputation: 22783

You can call a child component method using ref directive like this:

Indicate ref:

<coin-list ref="coinList" />

Use it

changeToEur () {
  this.$refs.coinList.changeToUsd()
}

Upvotes: 1

Related Questions