How can I retrieve the value from the input field using vue.js?

I am currently utilizing the vue-js-toggle-button library.

While I understand that I can access the value inside the name using $refs, the issue arises as I have 3 toggle buttons and cannot set a Ref because I want to retrieve the name value dynamically in "payload"...

In other buttons, I have used 

@click="Myfucntion($event.target)"

However, $event.target does not seem to work with @change in this specific library. 

    <toggle-button
          color="rgba(9, 90, 6, 1)"
          @change="SaveConfigFinalSemana($event)"
          name="email"
          ref='email'
          :labels="{checked: 'Sim', unchecked: 'Não'}"
        />

<toggle-button
          color="rgba(9, 90, 6, 1)"
          @change="SaveConfigFinalSemana($event)"
          name="sms"
          ref='sms'
          :labels="{checked: 'Sim', unchecked: 'Não'}"
        />

<toggle-button
          color="rgba(9, 90, 6, 1)"
          @change="SaveConfigFinalSemana($event)"
          name="wpp"
          ref='wpp'
          :labels="{checked: 'Sim', unchecked: 'Não'}"
        />

 const payload = {
        disparos_fds: elemento.value,
        tipo_envio: this.$refs.wpp.name,
        client_uuid: user.company_uuid
      };
javascriptvue.js

Answer №1

According to the information provided in the documentation regarding vue-js-toggle-button events, when a click event occurs, an object will be emitted with two properties: value and srcEvent. The value property represents the "state of the object", while srcEvent contains information about the "source click event". If you require access to the target element, it resides within the srcEvent property. You can experiment with the following code:

<toggle-button
  color="rgba(9, 90, 6, 1)"
  @change="SaveConfigFinalSemana($event)"
  name="email" ref='email'
  :labels="{checked: 'Yes', unchecked: 'No'}"
/>

Below is a demonstration of the SaveConfigFinalSemana method/function logging the value and srcEvent properties from the emitted object:

SaveConfigFinalSemana: function($event) {
  console.log($event.value);
  console.log($event.srcEvent);
}

If you wish to retrieve the target property of the DOM event or the name attribute of the target element, you can achieve this by accessing it as shown below:

SaveConfigFinalSemana: function($event) {
  console.log($event.srcEvent.target);
  console.log($event.srcEvent.target.name);
}

For a working example, you can refer to this demo.

I hope this explanation proves to be helpful!

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

How can I insert an HTML/PHP code snippet into a <ul> list using JavaScript?

My upload.php file saves images into an uploads/ folder within my main directory. I am looking to dynamically add a new li tag to my index file each time an image successfully uploads. Here is a snippet from index.php: <ul> <li><im ...

javascriptphphtmlimagehtml-lists

Backend undergoing fluctuations in hourly values

When passing JS dateTime to the backend using ajax(axios), I encountered a discrepancy in the timestamps. Prior to the post request, I have the following timestamp: Sun Nov 04 2018 21:53:38 GMT+0500 However, upon reaching the backend, the timestam ...

javascriptphpajaxdatetime

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

Best practices for managing CSV files in Next.js with TypeScript

Hello, I am currently working on a web application using nextjs and typescript. One of the features I want to implement is a chart displaying data from a csv file. However, I am not sure if using a csv file is the best choice in the long run. I may end up ...

javascriptreactjstypescriptnext.jspapaparse

The intricacies of JavaScript recursion explained thoroughly

I'm struggling to grasp how this recursion will function. Specifically, I can't seem to comprehend how the final console ('end'--) is being executed. Any guidance on the execution aspect would be greatly appreciated as I am having troub ...

javascriptrecursion

Remove a comment from the page without needing to refresh the entire

Is there a way to enhance this code so that when a comment is deleted, the page does not refresh? It can be frustrating when deleting a comment causes the page to scroll back to the top. AJAX function deleteComment(pid){ $.ajax({ type: "PO ...

javascriptphpajax

Ways to refresh my $scope once new data is inserted into the SQL database

As I implement the angularjs/SQL technique to fetch data from a database, the code snippet below demonstrates how it is done: $http.get("retrieveData.php").then(function(response){ $scope.tasks = response.data.tasks; }) In addition, there is a functi ...

javascriptangularjs

Is the webdriver.io waituntil method designed to return a boolean value of true or false

I am working on an automation framework using webdriver.io v5. I need to receive a boolean response from the code snippet below: waitAndCheckForContactToBePresent(contactName) { return browser.waitUntil((value) => { return this.chec ...

javascriptnode.jsselenium-webdriverwebdriverwebdriver-io

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Utilizing webpack with Preact 10.x (nearly identical to React) and TypeScript in the VSCode environment. Following an update from Node version 12 to version 14, there seems to be a problem where *.scss files no longer automatically generate their correspo ...

javascriptreactjstypescriptwebpackpreact

What is the best way to output a JSX element using an inline switch statement?

I have been attempting to use an inline switch in order to return an element, but all I am getting is an empty <span> </span>. What could be the issue here? getRowTdForHeader: (header: string, entry: response) => { return (< ...

javascriptreactjstypescript

Sending a series of filtered GET requests to my Express backend in a MERN (MongoDB, Express, React,

I have developed a MERN web application and am in the process of adding some GET methods to retrieve the same item for different scenarios. However, when I attempt to implement a second filter method and pass an existing parameter in my item schema, Postma ...

javascriptnode.jsreactjsexpress

"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

I need to showcase multiple duplicates of 2 different images on a webpage. Users are asked for the duplication speed, which I have already implemented, and also how many copies of each image they want. function show_image() { var img = document.create ...

javascripthtmlimageprompt

jQuery - Show or hide content with a toggle action

Is there a way to toggle the text on a button once certain content is visible? Can the content be hidden if the button is clicked again? To better illustrate, check out this example: JSFiddle I am looking to switch the button text from 'View content ...

javascriptjquery

Encountering a 404 error in production when refreshing on a Vue router subfolder

Currently, my Vue.js app is running in production on a subdomain with the configuration "base: '/my-app/'" set in vite.config.js (everything working smoothly so far). An issue arises when trying to access URLs like my-domain/my-app/my- ...

vue.jshttp-redirecthttp-status-code-404refreshsubdirectory

Tips for achieving expansion of solely the clicked item and not the whole row

I am trying to create a card that contains a cocktail recipe. The card initially displays just the title, and when you click on a button, it should expand to show the full menu and description. The issue I'm facing is that when I click on one element, ...

javascriptreactjsmaterial-uimaterial-design

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

I've created a basic template for my PHP website, but I'm struggling to find the best way to include my CSS and JavaScript files. Take a look at my index.php file below: <?php include'core/template.php'; $temp=new Template(); $sett ...

javascriptphphtmlcss

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

javascripthtmlfile

What is the best way to manage a JSON feed that does not provide any results?

Excuse my lack of experience as I pose my first question. Using FullCalendar 5.10.1, I am working on retrieving events dynamically associated with Festivals. I have followed the 'events (as a json feed)' pattern from the documentation. When ther ...

javascriptjsonajaxfullcalendarfullcalendar-5

Looking to remove a row with php, html, and ajax?

Trying to remove a row from an HTML table has been my latest challenge while working with Materialize CSS. Here is what I have so far, where the ID corresponds to the employee ID: https://i.stack.imgur.com/rjwba.png Below is the code snippet: <?php ...

javascriptphpmysqlajaxmaterialize