onChange input type[checkbox] not working with Vue styled components

Viewed 178

This is my simple functional component in Vuejs

import { Label, Input, Checkmark } from "./styles";
export default {
  functional: true,
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: Boolean
  },
  // eslint-disable-next-line
  render(h, { props, listeners}) {
    console.log(listeners);
    const changeHandler = listeners.change ? listeners.change : () => {};
    return (
      <Label>
        <Input
          type="checkbox"
          checked={props.checked}
          onChange={e => {
            console.log("checked", e.target.checked);
            changeHandler(e);
          }}
        />
        <Checkmark class="checkmark" />
      </Label>
    );
  }
};

The component simply won't console.log when used like

<VCheckbox
     checked={this.checkSelections[idx]}
     onChange={e => {
          this.$set(this.checkSelections, idx, e.target.checked);
     }}
 />

I'm using Vuejs - 2.5.x

If I console.log my listeners they definitely log change.

Second, if I use nativeOnChange instead, it does fire.

Last and importantly, In the very same fashion, I also have a button component (functional ) and it works fine with onClick ( no use of native there ). Can anyone please let me know what's going on ?

Update -

Similar is the case with nativeOnMouseover.

0 Answers
Related