Is it possible to easily invoke a method from one Vue component to another?

Having trouble calling a method from CoinList.vue in my two components, App.Vue. Here's the code snippet:

Snippet from 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 from CoinList.vue

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

The click event in App.vue is not triggering the function in CoinList.vue. I've tried using an event bus but couldn't figure it out. Any help would be greatly appreciated.

javascriptvue.jsvue-component

Answer №1

If you wish to invoke a method of a child component, you can utilize the ref directive as demonstrated below:

Specify the ref attribute:

<coin-list ref="coinList" />

Then, proceed to use it in your parent component:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenge encountered when making numerous ajax requests concurrently with jquery

I've been utilizing jQuery for my ajax requests. When the page loads, all three calls are triggered simultaneously and we receive responses at almost the same time. The problem arises when the 3 calls are made - only the callback function for the fi ...

javascriptjqueryajax

The only React element that is rendered inside a for loop is the last one

I'm struggling with a function that is supposed to render an infinite number of strings as Comment components, but it only displays the last component. This is the function I'm working with: function displayComments(...comments) { for(let i ...

javascriptreactjsecmascript-6

Creating interactive dropboxes in PHP and JavaScript to dynamically change options and display the selected value

Currently, I am in the process of working on a dynamic dropdown menu that involves select boxes. These values are being pulled directly from a MySQL database (if you're interested, here is how I set up the database). I have successfully retrieved and ...

phpjavascriptjquery

React is unable to assign a class field beyond the scope of axios

class App extends React.Component { app: Application; ... componentDidMound() { axios.get(…).then(res => { this.app.currentUser = res.data.data; // setting value inside lambda function. console.log(this.app.currentUser); // ...

javascriptreactjstypescriptaxios

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #). The input data I have is This is my amazing message with a stock $sym ...

javascripthtmlreactjs

JSNlog Exception formatting problem has surfaced

Encountering an issue with JSNlog and Nlog regarding the format of Exceptions from JSNlog. All error logs are being written out in JSON, but when an exception is thrown from JavaScript, the system encodes the %message property as JSON as well, causing the ...

javascriptc#jsonnlogjsnlog

Troubleshooting issues with Angular 8 component testing using karma leads to failure

As I begin testing my component, my first goal is to verify that the ngOnInit function correctly calls the required services. agreement.component.ts: constructor(private agreementService: AgreementService, private operatorService: Operato ...

javascriptangulartypescriptunit-testingkarma-jasmine

Tips for adding multiple audio tracks to a video using JavaScript

I am currently working on a video player that can play MP4 videos without audio files embedded in them. In addition to the video, I have two separate audio files available in English and Italian languages. To implement language selection functionality, ...

javascriptjqueryhtmlaudiovideo

Setting properties on a Vue component that refer to both the parent and the component itself can be tricky. Be cautious when attempting

Within my component, I often use it as a nested component with multiple levels of components and also as a mounted component through vue-router. The challenge arises when deciding whether to pass data from the parent or set it directly within the component ...

vue.jsvue-router

Transferring dynamic parameters from a hook to setInterval()

I have a hook that tracks a slider. When the user clicks a button, the initial slider value is passed to my setInterval function to execute start() every second. I want the updated sliderValue to be passed as a parameter to update while setInterval() is r ...

javascriptreactjstypescript

Enhancing ajax requests with headers in Ember.js

My goal is to configure request headers for my emberjs application. However, when setting it up in the initializer, the client_id appears as [object Object] instead of the actual value. This is the initializer that runs when the application starts. Apikey ...

javascriptjqueryajaxember.jsember-data

executing npm tasks concurrently

Trying to demonstrate running npm tasks in parallel is my current task. I should be able to achieve this using "&" for parallel and "&&" for series. { "name": "npm", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "co ...

javascriptnode.jsnpm

Reverse the order of images in jQuery image slider

Hey there, I have created a simple image slider using jQuery with previous and next buttons. The slider moves automatically and the next button works fine, but I am facing some issues with the previous button. To take a look at the code and test it out you ...

javascriptjquery

What is the process for assigning the key to a custom array in React using JSX?

Currently, I am developing a dynamic toolbar that adapts based on different states. The functionality works smoothly as expected, allowing me to include only the necessary buttons at any given time. The challenge arises with React's requirement for k ...

javascriptreactjs

Creating an Android and iPhone application integrated within a website page

Hi there, I'm in the process of exploring the possibility of creating a messaging app similar to Kik Messenger that can be used on both Android and iPhone devices, as well as accessed online via PC. Can this be done, and if so, which programming langu ...

javajavascriptandroidiosmobile

Is it possible to refresh the options for a select in AngularJS when they are in different controllers?

Two separate controllers are being used here; one for language, known as `langCntl`, and one for words, referred to as `wordCntl`. Within the `wordCntl` controller, there is an attribute called `ln`. This attribute is displayed in a form using `ng-select` ...

javascriptangularjsangularjs-scope

Removing an element in Vue.js

Can someone help me with a Vue.js issue I'm having? I'm working on a quiz and I want to add a button that deletes a question when clicked. Here's what I've tried so far: deleteQuestion(index) { this.questions.splice(index, ...

javascripthtmlvue.js

Place the retrieved data from the API directly into the editor

I've integrated the LineControl Editor into my app and everything is functioning perfectly, except for when I attempt to insert text into the editor. Here's the link to the LineControl GitHub page: https://github.com/suyati/line-control/wiki Fo ...

javascriptjqueryangularjs

Managing time and time discrepancies live in VueJS

I am trying to calculate the elapsed time from the order time in Vue, but I keep getting a warning message that says: [Vue warn]: You may have an infinite update loop in a component render function. Can anyone recommend the correct approach to tackle this ...

vue.jsvuejs2

Is it feasible to design a distinctive layout while utilizing a v-for loop in Vue 2?

I am currently in the process of designing a questionnaire. Within my array, each question is represented as an object. As I iterate through them using <component :is>, this component property guides how the question will be displayed - for example, ...

vue.js