时间戳

首页 > 解决方案 > vuejs - 如何捕获输入名称中的值？

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

标签： javascriptvue.js

解决方案

根据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);
}

这是一个实际的例子。

希望这会有所帮助！

推荐阅读