How can I call a Vue component method from a different application?

I'm facing an issue where my code works perfectly in pure html/javascript, but not when using vuejs. The function causing the problem is called myMethod(). While debugging in the javascript console, I can access it using myMethod("toto"). However, in vuejs, I can only access it using $vm0.myMethod("toto").

It is crucial for me to have it accessible as myMethod("toto").

Is this even achievable in vue?

Thank you in advance.

Answer №1

When it comes to non-parent-child relations, the process is quite similar. You can call a method of one component from another by adding a $on function to the $root instance. This allows you to access any method of a component from another component by calling the $emit function.

For example, in the first component:

$emit function in $root:

    ...
    c2method: function(){
     this.$root.$emit('component1') //like this
    },

This functionality resembles that of a socket connection. More information can be found here.

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

Getting command line argument parameters in React can be achieved by utilizing the `process.argv`

Is there a way to retrieve command line argument parameters in React? I currently have a React codebase that is utilizing Webpack. When running the following commands - npm run build -- --configuration=dev or npm run build -- --configuration=qa I need t ...

I need assistance on updating a document in MongoDB using Node.js

I'm in the process of developing a feature that automatically updates a player's high score to their account when they achieve a new record. However, I'm struggling with how to search for a player by name and update their tag using mongoose. ...

Using Nest JS to create two instances of a single provider

While running a test suite, I noticed that there are two instances of the same provider alive - one for the implementation and another for the real implementation. I reached this conclusion because when I tried to replace a method with jest.fn call in my ...

Ways to stop your Browser from Caching

Developing a Facebook app has been my recent project. One thing that really bothers me is the random occurrences where changes I make to my CSS style sheet or when adding a new Javascript function do not reflect in the browser. This can be very frustrating ...

Struggling to decide on the perfect CSS selector for my puppeteer script

I am trying to use puppeteer page.type with a CSS selector. <div class="preloader"> <div class="cssload-speeding-wheel"></div> </div> <section id="wrapper" class="login-register"> <div class="login-box"> <d ...

Alter the properties based on the size of the window

I am working with React-Spring and I need to adjust the offset of a component when the window size changes. I attempted the following solution, but it is not functioning correctly and requires me to refresh the browser each time. <ParallaxLayer ...

The latest on rectAreaLight enhancements in three.js

It seems like this abandoned feature of three.js has become somewhat of a coveted prize; I've attempted to incorporate it a few times without success. You can find an example that works on an older release here: My minimal broken example is availabl ...

Converting Persian calendar date to Gregorian in JavaScript

Looking for assistance in converting a date from 1379/10/02 to AD format, specifically to the date 2000/4/29 using the momentJs library. Any help with this task would be greatly appreciated. Thank you! ...

Function that recursively checks for the existence of an ID within a nested object structure

I need assistance in developing a function that can determine whether the link ID of an object or any of its children match a specific ID. For instance, if the link ID for Product paths is 51125095, the function should return true when this ID is passed in ...

A guide on using FileReader to efficiently read multiple images

I need to be able to select multiple images from one input and read them using File Reader. If I leave it as is, it only gives me one picture. const [image , setImage] = useState(''); const [imageSelected , setImageSelected] = useState(nul ...

Tips for excluding specific elements when clicking on a document

JavaScript $(document).click( function () { alert("Hello there"); } Web Development <div id="wrapper"> <div id="inner-1"> <div id="sub-inner1">Sub Inner1 Content</div> <div id="sub-inner2">Sub Inner2 Content&l ...

Choose all checkboxes across the entire webpage

Given the code below: <input type="checkbox" name="categories[9507]"> Is there a way to write a JavaScript command that can automatically select all checkboxes with similar naming structures on the entire page? The only difference in the names is t ...

A step-by-step guide to summing two numbers within a list using vue.js

How do I calculate the average of the first 5 numbers in my list taken from the URL, grouped by 5-minute intervals? I have a delay of 1 minute to ensure there are 5 values within the initial 5 minutes. After that, I want to display the averages in 3 differ ...

What steps can I take to prevent the "onclick" event from triggering multiple times?

I'm struggling to create a button that, when clicked, reveals a message input area. I am using the "onclick" attribute in the HTML and I want to ensure that the button is only clickable once to avoid generating multiple textareas on subsequent clicks. ...

ReactJS component not triggering OnChange event in IE 11

While exploring the React.js documentation, I came across a suggestion to use the onChange event for text areas. Interestingly, when I tried pasting some text into an empty IE 11 text area, the onChange event failed to trigger. Surprisingly, it worked perf ...

Encountering issues when making API calls from a .NET program

I'm encountering an error when trying to call an API from a .NET application: "Script7002:XMLhttpREQUEST:Network Error 0x80070005, Access Denied." Interestingly, I am able to get the correct response when testing the API with the "Advanced Rest Cl ...

Transfer a table row between tables - AngularJS

I am seeking guidance on how to implement ng-repeat in order to transfer data from one table to another. Essentially, I have a "master" table that displays data fetched from an API request. Each row in this table has a button labeled "favorite-this-row". W ...

Unexpected token N error was thrown while using the Jquery .ajax() function

While working on a form submission feature using JQuery .ajax() to save data into a MySQL database, I encountered an error message that says "SyntaxError: Unexpected token N". Can someone please explain what this means and provide guidance on how to fix it ...

Prevent the sender from receiving notifications from Firestore

Data is transmitted to firestore by the sender firestore saves the data firestore shares the data with all connected clients, sender included Is there a method for the sender to not receive the notification? OR If the sender does get the notification, is ...

Stop the form from refreshing upon submission using an Ajax call in AngularJS

Currently, I am in the process of developing a search form that requires two inputs: Job title and Location. These keywords are used to gather data from various websites. However, upon submitting the form, the page refreshes itself. To prevent this, I have ...