CODEWITHSUNDEEP
javascriptvue.js
Giulia Lage
Giulia Lage

Reputation: 1

vuejs - how to capture the value inside the input name?

I'm using vue-js-toggle-button library.

I know I could access the value inside the name using $refs but I have 3 toggle buttons and I cant set Ref because I wanna to get the name value dynamically in "payload"...

In others buttons I used @click="Myfucntion($event.target)"

but $event.target doesn't work with @change in this 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
      };

Upvotes: 0

Views: 349

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38777

Per the documentation for vue-js-toggle-button events, the event value emitted from a click will be an object containing two properties, value and srcEvent. value is the "state of the object" and srcEvent would be the "source click event". srcEvent is where you could access target if you need. Try the following:

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

Here is an example of method/handler SaveConfigFinalSemana logging out the value and srcEvent properties present on the emitted object:

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

If you need the DOM event target property and the name property of target, you could access it like:

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

Here is an example in action.

Hopefully that helps!

Upvotes: 1

Related Questions