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

Is Babel necessary for enabling JavaScript compatibility in my TypeScript React project, excluding Create React App?

This is the webpack configuration for my React project built in TypeScript, module.exports = { mode: 'development', entry: ['./src/main.tsx'], module: { rules: [ { // Rule for ts/tsx files only, no rule for js/js ...

javascriptreactjstypescriptwebpackbabel-loader

Having npm start is causing an error to be displayed

I am encountering an issue when I try to start 'npm' on my mean.js application. The error message is related to a missing file called '.csslintrc'. Below, I have included the terminal output as well as the snippet of code where the erro ...

javascriptnpmmeanjsnpm-start

Error: The command "vue" is not recognized

I am encountering an issue while trying to set up vue-cli using npm. Each time I check the version, I receive the error message -bash : vue: command not found. Despite my efforts which include uninstalling and reinstalling, as well as referring to resourc ...

vue.jsnpmmacos-high-sierravue-cli-3

how to set a variable's value outside of a Promise using internal code

export class YoutubeService { getTrendingVideos(country) { let result = []; return axios.get('/').then(function(res){ result = res.data.items; for (var i = 0; i < result.length; i++) { result[i] = { id: ...

javascriptexpresspromisepug

What is the best way to set a default value for a specified Date format retrieved from an API?

Here are examples of different data formats for ReleaseDate: 2014-09-23 09:00:00.923Z /Date(1407369600210)/ If you want to access this information from an API, you can use the following object dot-notation: result.data.Items[0].ReleaseDate Sometimes, ...

javascriptjsonmeteor

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

javascriptjqueryhtmlcsstwitter-bootstrap

Troubleshooting the Ng2-Charts Linechart to display all values instead of just the first two

Starting a new Angular application with the Angular-CLI (beta 22.1) has presented an issue when adding test data (5 values) to a chart. The scaling appears incorrect, displaying only the first two values stretched across the entire length of the graph (ref ...

javascriptangularchart.js

Activate Bootstrap modal using an anchor tag that links to a valid external URL as a fallback option

To ensure accessibility for users who may have javascript disabled, we follow a company standard of developing our web pages accordingly. Our target demographic still includes those familiar with VCRs blinking 12:00. One particular challenge involves a te ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

accessing Vue 3 application instance API from a file that is not a Vue file

With Vue 2, you could access the Vue instance Global api from .js files using the following syntax: Vue.prototype.$auth However, in Vue 3, you now have the app instance, which currently seems to only exist within the main.js file. So if, for example, I h ...

vue.jsvuejs3vue-composition-api

Using 'jquery.get' in combination with a servlet is

I need a servlet that can handle GET requests and return a specific string. A simple example of the code is shown below: public class QueryHandler extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) ...

javajavascriptjqueryajaxservlets

Top strategies for avoiding element tampering

What is the best solution for handling element manipulation, such as on Chrome? I have a button that can be hidden or disabled. By using Chrome's elements, it is possible to change it from hidden/disabled to visible/enabled, triggering my click functi ...

javascriptjqueryhtmldom

Issue with VueJS beforeRouteEnter hook not triggering

I have been following the steps outlined on this page: https://github.com/vuejs/vue-class-component#adding-custom-hooks Although no errors are appearing, the beforeRouteEnter hook is not triggering. I am not getting any of the expected console output. In ...

vue.jsvue-router

Utilize node.js to run a local .php file within a polling loop

Here is the purpose of my application in brief. I am using a PHP file to read data via an ODBC connection and then write that data to a local database. This PHP file needs to be executed LOCALLY ON THE SERVER every time a loop is processed in my node.js, ...

javascriptphpnode.jssocket.ioexecute

What causes the timer to pause, and what steps can be taken to avoid it? (Using Javascript with Iframe)

On my website, I have a page where clients must view an advertisement for 20 seconds. The website is displayed in an iframe with a countdown timer above it. I've set it up so that the timer stops when the window loses focus to ensure the client is ac ...

javascripthtmliframetimercountdown

Enhanced coding experience with JavaScript completion and ArangoDB module management

Exploring New Horizons After more than a decade of using Eclipse for Java development, I have decided to delve into the realms of javascript and arangodb due to high demand. My current task involves developing multiple microservices to run within arangodb ...

javascriptnpmvisual-studio-codearangodbcode-completion

What is the best way to upload a file using AJAX request in Sinatra?

I am attempting to upload a file using a jQuery AJAX function with a Ruby-Sinatra function. Here is the code snippet: <form id="ucform" method="post" action="#" enctype="multipart/form-data"> <input type="file" id="cfile" name="cfile" onchange= ...

javascriptjqueryrubyajaxsinatra

Guide to setting up index.js with ApiProvider in the Redux Toolkit (RTK)

Have you ever considered customizing the index.js file in the root directory based on ChatGPT's recommendations? I'm not entirely convinced that it's the most common practice. What are your thoughts on this approach? // Here is an example of ...

javascriptreactjsreduxredux-toolkitrtk-query

AngularJS: Setting up filter asynchronously

I'm facing a challenge when trying to set up a filter that requires asynchronous data. The filter's purpose is simple - it needs to convert paths to names, but this task involves a mapping array that must be fetched from the server. While I cou ...

javascriptangularjsasynchronousfilter

Deactivate the form outside of normal business hours

I need to create a form for a delivery service that only operates from 9am to 9pm. If a user submits the form outside of these hours, I want to redirect them to a page displaying the company's operating hours instead of a thank you page. For instance ...

javascriptjquery

Create a dynamic animation effect by making a div slide on and off the screen

I'm having trouble figuring out how to make my div slide with a toggle button. I attempted to use variables, but since I have multiple instances of this, it's becoming too complicated to keep track of all the clicks on each one. $(document).r ...

javascriptjquery