javascript - vuejs-如何在输入名称中捕获值？

我正在使用vue-js-toggle-button库。

我知道我可以使用$ refs访问名称中的值，但是我有3个切换按钮，我无法设置Ref，因为我想在“有效载荷”中动态获取名称值...

在其他按钮中，我使用了@click="Myfucntion($event.target)"

但是$event.target不适用于此库中的@change。

    <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
      };

最佳答案

根据vue-js-toggle-button events的文档，单击发出的事件值将是一个包含两个属性value和srcEvent的对象。 value是“对象的状态”，而srcEvent是“源单击事件”。 srcEvent是您可以根据需要访问target的地方。请尝试以下操作：

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

这是方法/处理程序SaveConfigFinalSemana注销发出的对象上存在的value和srcEvent属性的示例：

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

如果需要DOM事件的target属性和name的target属性，则可以按以下方式访问它：

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

这是一个正在起作用的example。

希望有帮助！

关于javascript - vuejs-如何在输入名称中捕获值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58106182/