utilize regular JavaScript to manage Vue.js events beyond the component's scope

There is a VueJs component embedded in a regular web page. Whenever the component triggers an event, I need the regular web page to react accordingly. Is this achievable?

The Sites.vue component is a single file element placed within the content of the regular web page.

<sites @pmds="handlePmds"></sites>

Occasionally, it dispatches an event using the following code:

this.$emit("pmds", pmds);

On the main webpage, I intend to handle the event in this manner:

    function handlePmds(e) {
      console.log(e);
    }

However, this approach fails because handlePmds is not recognized as a VueJS function. So how can I capture and respond to that event effectively?

javascriptvue.jsvuejs2

Answer №1

To start, generate a custom JS CustomEvent within one of the vueJS functions. The actual data payload is placed in the second parameter under a field named detail

methods: {
  sendPmds() {
    let event = new CustomEvent("pmds", { bubbles: true, detail: pmds });
    document.dispatchEvent(event);
  }

Subsequently, within the main JS file, you can handle the event just like any other event. In my scenario, I utilized the data to populate a jQuery autocomplete input field:

document.addEventListener("pmds", function(event) {
  if (event.detail?.length) {
    $("#pmd").autocomplete("option", "source", event.detail);
  }

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

Tips for determining the duration between the Monday of last week and the Sunday of last week

Can anyone help me figure out how to retrieve the dates from last week's Monday to last week's Sunday using JavaScript? I've searched through various sources with no luck. Hoping someone here can provide some guidance. ...

javascriptvue.jsdateelement-plus

Execute the ajax function using Facebook API

I am currently working on a code to fetch data from Facebook to my localhost, but I have encountered some challenges along the way. Here are the issues that I am facing and I would appreciate any assistance: (1) Initially, I am retrieving data from a spec ...

javascriptphpjqueryajaxfacebook

Is there a way to incorporate a loading spinner into a MaterialUI DataTable without having to specify a fixed height for the parent component?

Currently, I am using a MaterialUI DataTable with the following setup: <div style = {{height: 300}}> <DataGrid loading={true} getRowHeight={() => "auto"} getEstimatedRowHeight={() => 250} ...

javascriptreactjstypescriptmaterial-ui

Is there a way to determine the currency symbol based on the information provided by ipinfo?

Currently, I am utilizing JavaScript to obtain the currency symbol based on the information provided by ipinfo. I have successfully retrieved the countries' names and other details using the code below. However, I am now faced with the challenge of ut ...

javascriptjquerycurrency

Python for Asynchronous HTTP Requests

I am currently working on a Python script to extract the value of the href attribute from an anchor element on a web page. The challenge is that the div element containing the anchor element's content is loaded through AJAX jQuery calls when the web p ...

javascriptjquerypythonhtmlajax

Building an expansive navigation menu with react-bootstrap

My current project involves creating a mega menu. Although I successfully made a responsive navbar, the challenge now is to implement a dropdown panel with 100% width. I've tried various approaches but haven't found one that works. Note: The oth ...

javascriptcssreactjsbootstrap-5react-bootstrap

How to pass the ng-repeat $index value as a parameter in AngularJS

Within the code snippet provided, there is a shell page index.html and a partial view currently utilized by two different controllers. The static data in AppController is connected to the list.html partial view and displayed as a table. In the JavaScript p ...

javascriptangularjs

Utilizing Aramex API in React Native: A Step-by-Step Guide

Currently, I am tackling an eCommerce venture that requires the utilization of Aramex APIs for shipping and other functionalities. Since my project is being developed in React Native, I am seeking guidance on how to integrate Aramex APIs into this framewo ...

javascriptandroidiosreact-nativearamex

Synchronization issue between CSS style and Javascript is causing discrepancies

I am looking to avoid using jquery for simplicity. I have three websites that each page cycles through. My goal is to scale the webpages by different values. I attempted applying a class to each page and used a switch statement to zoom 2x on Google, 4x o ...

javascripthtmlcssiframe

Create a unique filter in an ng-repeat directive that allows users to personalize the data displayed

Is there a way to create a custom filter that hides the inventory column for Color Pencil Special on October 2nd, 2017 in the view? The inventory for Color Pencil Special is dependent on the inventory of regular Color Pencils, which are stored somewhere e ...

javascriptangularjsalgorithm

What are the steps to create a dynamic navigation bar in React without encountering hydration issues?

My goal is to dynamically show or hide links based on user authorization. Here's my initial approach: const Navbar = () => { const { canDo, ...} = useUser(); //A Zustand store return ( <> <div> <ul> ...

javascripthtmlcssreactjs

gmap3 has encountered an error: undefined is not a valid function

I am working on a WordPress site and trying to integrate a Google map into the contact page. However, I'm encountering an error Uncaught TypeError: undefined is not a function in the JavaScript console. Below is the code snippet causing the issue, can ...

javascriptjquerywordpressgoogle-maps

Vuetify's v-btn-toggle behaving unexpectedly by providing incorrect value

I have an array of different environments and I am trying to use v-btn-toggle to toggle between buttons representing each environment. The issue I am facing is that when I log this.envSelected, it displays the index of the selected environment rather than ...

vue.jsvuetify.js

Refresh an iframe smoothly and without any visual distraction (using JavaScript)

Does anyone have a clever solution to dynamically refresh an iframe without the annoying flickering or flashing that usually occurs when the page reloads? Is it possible to incorporate a smooth blur-out and blur-in animation instead of the unappealing flic ...

javascriptjqueryajax

How to implement a service function to handle $http responses in a controller

Is it possible to use $http only for my service and not the controller? I am getting undefined in my console.log when trying to display data in a $scope. Here is my code: app.controller('adminControl', ['$scope','$routeParams&apo ...

javascriptangularjs

Creating characters dynamically based on the length of user input in VSCode Snippet

Here is a simple vue-html snippet: { "BANNER1": { "prefix": "banner", "body": ["<!-- ----------------", "/// $1", "--------------------- -->"] } } This sni ...

htmlvue.jsvisual-studio-codevscode-snippets

The CSS star rating system is malfunctioning

I'm struggling to implement a rating star system in my project. I have experimented with various code snippets, but none seem to be functioning properly. Take a look at the outcome: https://i.sstatic.net/g3DvH.png ...

javascriptangularjstwitter-bootstrapcss

Creating a PEG Grammar that can match either a space-separated or comma-separated list

I am currently working on creating a basic PEG (pegjs) grammar to analyze either a space separated list or a comma separated list of numbers. However, it seems like I am overlooking a crucial element in my implementation. Essentially, I aim to identify pat ...

javascriptparsingpegpegjs

The Bootstrap navbar stubbornly refuses to hide after being clicked on

Is there a way to adjust the data-offset-top for mobile view? Additionally, I am having trouble hiding the menu when clicking on a link. I have tried some code from stackoverflow without success. Can someone please assist with this issue: <nav class= ...

javascriptjqueryhtmlcssnavbar

Looking for assistance in creating a unique jQuery validation function tailored to your

Looking at my form attribute, it appears as follows: onsubmit="return validateForm(this);" Additionally, I have a jQuery function set up like this: function validateForm(form) { $(form,"input").each(function() { if($(this).length < 1) { ...

javascriptjquery