Это мой простой функциональный компонент в 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
вместо этого, он срабатывает.
И последнее, что важно: таким же образом у меня также есть компонент кнопки (функционал), и он прекрасно работает с onClick
(там нет использования нативного). Может кто-нибудь, пожалуйста, дайте мне знать, что происходит?
Обновление -
Аналогично случаю с nativeOnMouseover
.