Calling parent component method from child component written in Jsx Vue

Question

I didn't expect it be tough.

I've a child component written like

InputWrapper.vue

<script>
import StyledInput from "./input";

export default {
  name: "MyInput",
  props: {
    multiline: Boolean,
    onChange: Function
  },
  render(h) {
    const { multiline, onChange } = this;
    console.log(onChange);
    return (
      <div>
        <StyledInput multiline={multiline} onChange={e => onChange(e)} />
      </div>
    );
  }
};
</script>

Then I have actual input as vue-styled-components as Input.js. For those familiar with styled components need not explain that code.

Then I consume this InputWrapper component in my parent component Home.vue

<template>


<div class="pLR15 home">
      <Row>
          <MyInput :multiline="true" placeholder="Sample Input" type="text" :onChange="handleChange"></MyInput> 
      </Row>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Row from "@/ui_components/row";
import MyInput from "@/ui_components/form/input/index.vue";

export default {
  name: "home",
  components: {
    HelloWorld,
    Row,
    MyInput
  },
  methods: {
    handleChange: function(e) {
      console.log("Hey you are changing my value to", e.target.value);
    }
  }
};
</script>

Problem - onChange on parent is not fired.

HalfWebDev HalfWebDev · Accepted Answer · 2018-10-05T08:20:55

@change.native="handleChange" did the trick for me. Also I cleaned up all the event handlers listening on child. Since my type and placeholder properties were passing down as such, so should be the event listeners. With that thought the .native modifier works best for now. Although things could have been uniform by just @change="handleChange" which I was trying earlier and lead to trying out passing function as props to child.

IMP NOTE - Vuejs doesn't treats @change as normal onChange. @input is preferred if the idea is to capture every keystroke. Here comes the opinions! :)

Calling parent component method from child component written in Jsx Vue

1 Answers