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

Question

我正在使用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
      };

Answer 1

根据vue-js-toggle-button events的文档，点击发出的事件值将是一个 object 包含两个属性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 的示例，它注销了发出的 object 上存在的value和srcEvent属性：

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

如果你需要 DOM 事件target属性和target的name属性，你可以像这样访问它：

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

这是一个实际的例子。

希望这会有所帮助！