Vue 3 - Using Emit Functionality in a Reusable and Composable File

I'm trying to utilize the emit function in my file called useGoo.ts

import Swal from "sweetalert2/dist/sweetalert2.js";

export default function useModal() {

  const { emit } = getCurrentInstance();

  function myId() {
    emit('id', '123')
  }

}

Unfortunately, I can't seem to get the emit function to work. I keep getting this error message:

Property 'emit' does not exist on type 'ComponentInternalInstance | null'

Answer №1

Ensure to declare emit within your component and subsequently include it as an argument in the composable function

const useModal = (emit) => {
  const generateId = () => {
    emit('id', '123')
  }
}

Answer №2

When working with TypeScript, I found the solution to be simply:

const { emit } = getCurrentInstance() as any;

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

"Utilizing JSON parsing in Node.js and rendering the data in a Jade template

I need assistance with parsing JSON and presenting the response in a tabular format using Jade. Can you help me display the key-value pairs in two separate columns? Node.js exports.postMQinput = function(req, res) { req.assert('name', 'Q ...

What is the mechanism behind the functioning of StackOverflow's notification system?

Could you explain the technique that is utilized to transmit and receive data from the client to the server? How does it manage to provide almost real-time results when new changes take place? Can anyone demonstrate the code being used for this process? ...

Eliminating a pattern with underscore.js or jquery - the complete guide

I am looking to remove the ellipses (...) from a value such as ...India. How can I achieve this using underscore.js, jQuery, or JavaScript? Any tips on how to accomplish this would be greatly appreciated! ...

JavaScript: An object containing a unified handler for all method invocations

Let me explain further. Math.add(2, 2) //4 Math.multiply(4, 9) //36 Whenever a method in the Math object is invoked, it triggers a central processor that interprets the function name to determine its action. Can an object execute a default function when ...

Update the FontSize in the HTML dropdown menu using JavaScript

I am having trouble filling my Selection using a script. For example, when I try to populate my FontSizeMenu, I use the following code snippet: function FillFontSizeMenu() { FillSelection(GetPossibleFontSizes(), "fontSizeMenu"); } function GetPossib ...

The react component is not defined within the <Popup></Popup> tag

SOLVED: Big thanks to everyone who offered their assistance. Upon further investigation, I discovered that in the library I was using, the trigger={} functionality is specifically designed to work only with a button element. To address this issue, I took ...

Choosing a random element in React: A step-by-step guide

I'm currently working on a dynamic website that aims to load a random header component upon each refresh. Despite my various attempts, the functionality operates smoothly during the initial load but consistently throws this error on subsequent refresh ...

What is the functioning of the node.js next() middleware without any parameters supplied?

When working with middleware functions in Express, the signature typically includes function (req, res, next). However, it may be surprising to some that the next() call does not require any arguments. This concept can be better understood by considering t ...

The onclick event seems to be malfunctioning on the website

My goal is to implement a modal box that appears when a user clicks a button and closes when the user interacts with a close button within the modal box. I have created two functions for this purpose: check() : This function changes the CSS of an element ...

Unable to simulate the Enter key press event for a text area using Angular 7

I've implemented a feature that allows users to type something and then press the submit button, at which point the cursor should move to the next line. If the user types some words and presses the Enter key, the cursor should also shift to the next l ...

Sending data from TextBox as json format

JavaScript Code: var latitude = document.getElementById("<%=txt_Lat.ClientID %>").value; var longitude = document.getElementById("<%=txt_Long.ClientID %>").value; var jsonData = {latitude: latitude, longitude: longitude}; var jsonString = JSO ...

Testing vue.js components through vue-loader with dependency injection

I am currently experimenting with testing my Vue.js component using vue-loader, a webpack loader. I tried following the tutorial provided by vue-loader but encountered unexpected issues. Below is the code snippet for my component: <template> <h ...

Is there a way to improve the efficiency of this jQuery function that toggles the image source?

I have implemented a functionality that seems to work, but I'm unsure if it's the most efficient solution. I couldn't find a ready-made 'copy-paste' solution online, so I ended up writing this code myself. I am sticking with the &l ...

When scrolling, the selected text does not maintain its correct position

I'm looking to enable my users to search by selecting text. Once they select text, a new button will appear on the right side of the selected text giving them the option to search or not. However, when the user scrolls to the bottom of the page, the p ...

Is there a way to trigger a function with the onclick event in NextJs?

Working on my NestJS project, I am still a beginner in the field. My current task involves creating a web application that displays a leaflet map with clickable tiles. Each tile should have a button that triggers a specific function when clicked. However, ...

"Interactive bootstrap tabs nested within a dropdown menu that automatically close upon being clicked

Hey, I've got a dropdown with tabs inside. When I click on certain tabs within it, they close but the content inside the tabs that I click on changes, so it's functioning properly. However, the issue is that it closes when I want it to stay open ...

Utilizing the fetch() method in Vuex to obtain a restful API

Struggling to integrate my API data through Vuex, I am in dire need of a reliable guide or perhaps someone who can assist me with this task. Previously, without using Vuex, all my requests functioned flawlessly. However, now I'm unsure about the neces ...

Ways to update a component when the value of a Promise is altered

I am struggling with Vue component re-rendering due to a problem related to consuming data from a Promise. The data is fetched and stored under the specific property chain (visualData.layout.cube...), where I assign values to DATA properties (such as label ...

Creating dynamic backend routes in NextJS is a great way to add flexibility to

Is there a way for me to implement dynamic backend routes? I am working on an image hosting platform where users should be able to save their images on the server under unique domains like http://localhost/<random_id>. An example link would look so ...

How can I configure nest.js to route all requests to index.html in an Angular application?

I am developing an Angular and NestJS application, and my goal is to serve the index.html file for all routes. Main.ts File: async function bootstrap() { const app = await NestFactory.create(AppModule); app.useStaticAssets(join(__dirname, '..&ap ...