Тип ввода onChange [флажок] не работает с компонентами в стиле Vue - PullRequest
0 голосов
/ 29 октября 2018

Это мой простой функциональный компонент в 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...