Hearken to a Vue event using regular JavaScript

One of my Vue components emits the change event.

  methods: {
    onSelect(value) {
      this.open = false
      if (value === this.value) return
      this.$emit('change', value)
    },
  }

I have integrated this component into an .astro file (basically Vanilla JS/HTML).

  <VisSelect client:load brand={brand} name={selectId} placeholder={placeholder} label={label} required={required} options={options} />

I have tried adding an event listener to my document, listening for the change event, but it does not seem to be triggered.

document.addEventListener('change', (e) => console.log(e))

Answer №1

To implement functionality using web components, create a reference to the main div (e.g. selected) and trigger a CustomEvent:

onSelect(value) {
  this.open = false;
  if (value === this.value) return;
  this.$refs.selected.dispatchEvent(
    new CustomEvent('change', {
      detail: { value },
      bubbles: true,
      composed: true
    })
  );
}

Retrieve the data provided in the event like this:

document.addEventListener('change', (e) => console.log(e.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

Animating the change in Slider value with Material-UI in React

Recently delving into React, I encountered my first challenge that has been consuming my time for hours. I'm working with a Slider component from Material-UI and seeking to animate the value changes. Currently, when clicking on a button, the slider i ...

Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

FINAL UPDATE 25/06/20: After a thorough investigation, I discovered the root causes of why the progress bar was not functioning as intended. Firstly, dealing with $.ajax() proved to be cumbersome due to its lack of proper promise handling. To resolve this ...

Error when using jQuery AJAX to parse JSONP callback

Take a look at this code snippet: $(function () { $.ajax({ type: "GET", url: "http://mosaicco.force.com/siteforce/activeretailaccounts", dataType: "jsonp", crossDomain: true, jsonp: "callback", error: f ...

Retrieving information from an API with the help of Vue.js

I am encountering an issue while attempting to retrieve data from an API using Vue.js. Despite my efforts, I have been unsuccessful in achieving this goal. Here is the code snippet: <!DOCTYPE html> <html> <head> <title>V ...

What is the most effective way to determine which radio button is currently selected in a group with the same name using JQuery?

<form class="responses"> <input type="radio" name="option" value="0">False</input> <input type="radio" name="option" value="1">True</input> </form> Just tested: $('[name="option"]').is(':checked ...

What is the best method for iterating through the AJAX response?

I am currently exploring AJAX coding techniques and have recently started using jQuery. My goal is to retrieve subcategories from a MongoDB database and dynamically populate them in separate option tags within a select tag once the parent select tag is cli ...

Scroll up and down to witness the enchanting interplay of fading in and out

Looking to expand upon the solution given in this response. The existing code effectively fades in an element while scrolling down and fades out an image when scrolling up; however, it lacks the functionality to fade out when scrolling down. I am aiming ...

Managing data in React and JavaScript: Clearing fields upon successful sign up and redirecting to login page after receiving a 200 status code

Here is the code for my SignUp react function. After receiving a response of 200 upon clicking the Sign up button, I want to clear the text in all three fields and redirect the user back to the login page. I'm new to web development so any assistance ...

Switching images dynamically using Flask and JavaScript

I'm currently working on Flask and encountering a perplexing issue. I'm attempting to update an image using JavaScript, but I am getting these errors from Flask: ... 12:05:34] "GET / HTTP/1.1" 200 - ... 12:05:38] "GET /img/pictur ...

Tips for accessing the assigned variable within and outside of a function

Currently, I am working with Webdriverjs and facing an issue. I am trying to assign a variable in a function and then compare that result with some data retrieved from a csv file. However, I am encountering a problem where the value of the data from the ...

What is causing my reusable component to malfunction when used in conjunction with the "setInterval" function?

I have created a custom <Loader /> component in which I can pass the text it is rendering and the speed as props. The code for the component is shown below: class Loader extends Component { constructor(props) { super(props); this.state = { ...

Generating an array of objects based on a specified condition

I am working on creating an array of objects. I want to add objects based on a condition, but instead of not adding the object in the array, it is adding false. I have attempted the following: const flag = false; const list = [ { key: 'abc&a ...

ways to invoke javascript function on body loading

I'm struggling to invoke a JavaScript function when the body loads. Currently, I have the function call on a button but cannot get it to work when added to the body load event. HTML: <body onload="bodyload();"> JavaScript: function bodyload( ...

Error: The 'document' object is not recognized in this context (React)

I attempted to display my main page using routes but I am still encountering the same ReferenceError. Below is my code snippet: import React from "react"; import ReactDOM from "react-dom/client"; import App from "../components/app ...

Trouble with JavaScript confirm's OK button functionality in Internet Explorer 11

Having trouble with the OK button functionality on a JavaScript confirm popup in IE11. For one user, clicking OK doesn't work - nothing happens. It works for most other users though. Normally, clicking OK should close the popup and trigger the event h ...

Getting some clarity on how to structure a project using Node.js, Express.js, and React.js

I am in the process of developing a website for online shopping purposes, essentially an e-commerce platform. However, I am facing a dilemma where create-react-app sets up its own Node.js server to communicate with my backend (which handles MySQL queries) ...

How can we control the content being displayed on our tree?

Is there a way to customize the view of our V-treeview by filtering what is displayed? By entering the beginning of an element key in the filter field input, the tree will only show elements whose keys match the input. I am working on Vue.js with the late ...

Looking to receive child events within a Vue 3 setup()?

Looking to convert the code below to use Vue 3 composition API. I am trying to listen for an event from a child component in a parent component that utilizes the render function. In Vue 3, $on has been removed and I'm unsure of how to replace it in t ...

Is your Vuex state data not persisting properly?

I am currently developing an admin panel using Vue.js and utilizing Vuex for state management. store/module/home/home.js: import instance from "../../../services/Http"; const state = { usersCount: 0, customersCount: 0, chefsCount: 0, d ...

Best practice for ensuring an Apollo query is completed before transitioning to the next page?

When implementing the Apollo module in a Nuxt application, the default behavior during route changes is to immediately render the new page without waiting for data to be fetched from Apollo. This can result in a choppy rendering experience where the page ...