onChange输入类型[复选框]不适用于Vue样式的组件

时间:2018-10-29 09:07:29

标签: javascript vue.js vuejs2

这是我在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>
    );
  }
};

像这样使用时,该组件根本不会console.log

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

我正在使用Vuejs-2.5.x

如果我用console.log登录我的listeners,他们肯定会记录更改。

第二,如果我改用nativeOnChange,则会触发。

最后,重要的是,我也有一个同样的按钮组件(functional),它可以与onClick一起正常工作(在那里不使用native)。有人可以让我知道发生了什么吗?

更新-

nativeOnMouseover相似。

0 个答案:

没有答案