Guide to accessing a method from a separate file with the help of an event bus

I'm working on CreateEntryStepper.vue where I have a button that needs to call a function in CreateEntryStepperImageUpload.vue when pressed.

I understand that event busses need to be used, but I am unsure about what exactly needs to be passed and how to properly set them up.

In bus.js file, the code currently looks like this:

import Vue from "vue";

export const bus = new Vue();

Within CreateEntryStepper.vue, I'm not certain which event to emit:

import { bus } from "@/components/wizard/bus.js";

async submitEntry() {

  this.$Progress.start();
  bus.$emit();

For CreateEntryStepperImageUpload.vue (where saveImage is the method I want to call), I'm not sure of the correct placement:

import { bus } from "@/components/wizard/bus.js";

And where should this go?

bus.$on()

async saveImage() {

My main question now is, what do I emit and how can I ensure that saveImage is triggered when the button is pressed?

javascriptvue.js

Answer №1

Specify the name of the event, which can be personalized to your liking. For instance: bus.$emit('upload-image');, then you monitor this event and execute your callback using:

bus.$on('upload-image', () => {
  saveImage
    .then(/* Perform actions */)
    .catch(/* Perform actions */);
});`

To learn more about how custom events function, feel free to consult the documentation: https://v2.vuejs.org/v2/guide/components-custom-events.html

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

There are no connection events being triggered - using Mongoose version 4.7.1 with Express

My current struggle involves establishing a connection from my express app to MongoDB via Mongoose. Despite the simplicity of the setup, which is as basic as it gets: var mongoose = require('mongoose'); mongoose.connect('mongodb://localhos ...

javascriptnode.jsmongodbexpressmongoose

Tips for sending an Ajax request to a separate URL on the same server

When making an ajax request to my server, I use the following code: var data = ''; $.ajax({ type: 'GET', url: 'api/getnews/home/post/'+title, data: data, datatype: 'json', success: f ...

javascriptjquerydjangoajaxget

Using app.js in a blade file can cause jQuery functions and libraries to malfunction

In my Laravel application, I am facing an issue with my vue.js component of Pusher notification system and the installation of tinymce for blog posts. Adding js/app.js in my main layout blade file causes my tinymce and other jQuery functions to stop workin ...

javascriptphpjquerylaravelvue.js

Design of Redux middleware with focus on return values

I just finished learning about redux middleware, and it seems really useful. However, I have a question regarding the return values of middleware. I understand that some middleware return values (such as redux-promise), while others like logging do not - ...

javascriptreduxmiddlewareredux-promise

uib-datepicker-popup allowing for changing minimum mode dynamically

Is there a way to dynamically set the minMode of an Angular Bootstrap Datepicker? I managed to achieve this using the following code: <input type="text" ng-model="myDate" uib-datepicker-popup="{{datepickerFormat}}" datepicker-options="{& ...

javascriptangularjsdatepickerangular-ui-bootstrap

Create a file object using content with the help of JavaScript

I am working with a file containing specific data const ics = 'BEGIN:VCALENDAR\n' + 'VERSION:2.0\n' + 'CALSCALE:GREGORIAN\n' + 'METHOD:PUBLISH\n' + 'END:VCALENDAR\n'; I am trying t ...

javascriptangular

Searching through an array to isolate only image files

I am working with an array that contains various file types, all stored under the property array.contentType. I am trying to filter out just the images using array.contentType.images, I believe. Check out the code snippet below: const renderSlides = a ...

javascriptreactjsmaterial-ui

Transfer external variables into the image's onload function

I am trying to retrieve image dimensions and then execute additional actions. Since the image onload function is asynchronous, I have decided to handle everything within the onload call. This is my current approach: function getMeta(url, callback) { v ...

javascriptjquery

Deriving variable function parameters as object or tuple type in TypeScript

Searching for a similar type structure: type ArgsType<F extends Function> = ... which translates to ArgsType<(n: number, s: string)=>void> will result in [number, string] or {n: number, s: string} Following one of the provided solu ...

javascriptfunctiontypescriptargumentstype-inference

A method of iteration that allows us to traverse through an object, regardless of whether it contains a single item or an array of items, is known as dynamic looping

I am dealing with a JSON output that can have different types of data: There may be an array of objects like this: var data = { "EARNINGS": [ { "PAYMENT": "1923.08", ...

javascriptjson

Transforming the Blade user profile into a sleek Vue interface for the Laravel-Vue project

They have requested me to convert all pages from blade to vuejs. I have begun the process with the user profile (Profile.vue), but I am unsure about how to execute PUT requests using Axios in this case. Can someone provide guidance on creating the code for ...

laravellaravel-5vue.jsvuejs2axios

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

javascriptjqueryhtmlajax

Updating Jqplot display upon ajax call completion

Currently, I have a Jqplot set up using the AJAX JSON Data Renderer and it's functioning properly. There is a button on the page where users can input new values (updated through ajax) which are then stored in the same DB as the json data source. Whe ...

javascriptjqueryajaxjsonjqplot

Having trouble with my bootstrap slider carousel - it's just not cooperating

I incorporated Bootstrap's carousel to display the various courses on my website, featuring three courses at a time before transitioning to the next set of three. However, I am encountering an issue with this setup. Please see the image below for refe ...

javascripthtmlcssbootstrap-5

Winston prefers JSON over nicely formatted strings for its output

I have implemented a basic Winston logger within my application using the following code snippet: function Logger(success, msg) { let now = new Date().toUTCString(); let logger = new (winston.Logger)({ transports: [ new (winsto ...

javascriptnode.jsloggingnpmwinston

Implementing a Fixed Navbar in VueJS on Scroll

I am seeking help with creating a Fixed Navbar on Scrolling using Vue.js. I initially wrote some jQuery code for this functionality, but now I want to transition it to Vue.js. The updated code can be found in a file named navbar.js. Previous jQuery CODE ...

htmljquerycssvue.js

What is the best way to delete rows from a table that was created using a JQuery AJAX response?

I am currently working on a coding project where: The user is required to input a location, Clicks on a button to execute a GET call in order to fetch data based on the specified location, and A table is then filled with the retrieved data. My goal is t ...

javascriptjqueryajaxhtml-tableget

Using React: What is the best method for handling asynchronous requests to fetch a FirebaseToken and subsequently utilizing it in an API request?

My React app is interacting with an API through a Client component. Components can access the Client like this (example in the componentDidMount function of the Home page, where I retrieve a list of the user's items): componentDidMount() { let u ...

javascriptreactjsfirebasefirebase-authentication

Issue with Twilio's sendMessage function: it is not successfully delivering messages to every value within

I am encountering a problem with Twilio failing to send a message to all the values in an array. var index; var a = req.body.numbers; console.log(a); if (req.body.numbers.indexOf("undefined") > -1) { console.log("No numbers stored"); } else { for ...

javascriptarraysnode.jsexpresstwilio

Benefits of utilizing minified AngularJS versions (Exploring the advantages of angular.min.js over angular.js, along with the inclusion of angular.min.js.map)

After introducing angular.min.js into my project, I encountered a problem. http://localhost:8000/AngularProject/angular.min.js.map 404 (Not Found) angular.min.js.map:1 Upon further investigation, I discovered that including angular.min.js.map resolve ...

javascriptangularjsminifysource-maps