I've been working on VueJS just 1 weeks ago for a project.

I've created two components: * Account.vue (Parent)

<!--It's just a little part of the code-->
 <e-textarea
    title="Informations complémentaires"
    @input="otherInformation" <!--otherInformation is a string variable which contains the text value-->
    :value="otherInformation"></e-textarea>

• TextArea.vue (Children Component)

<template>
  <div class="form-group">
    <label for="e-textarea">{{ title }}</label>
    <textarea
      id="e-textarea"
      class="form-control"
      row="3"
      :value="value"
      v-on="listeners"
    >
    </textarea>
  </div>
</template>
<script>
import { FormGroupInput } from "@/components/NowUiKit";

export default {
  name: "e-textarea",
  components: {
    [FormGroupInput.name]: FormGroupInput
  },
  props: {
    title: String,
    value: String
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        input: this.updateValue
      };
    }
  },
  methods: {
    updateValue(value) {
      this.$emit("input", value);
    }
  },
  mounted() {
    console.log(thisponents);
  }
};
</script>

<style src="@/assets/styles/css/input.css" />

When I write something in my TextArea Custom component from my Account.vue, my text value does not update and my listener function is not passed. Does I need to have something else?

I've been working on VueJS just 1 weeks ago for a project.

I've created two components: * Account.vue (Parent)

<!--It's just a little part of the code-->
 <e-textarea
    title="Informations complémentaires"
    @input="otherInformation" <!--otherInformation is a string variable which contains the text value-->
    :value="otherInformation"></e-textarea>

• TextArea.vue (Children Component)

<template>
  <div class="form-group">
    <label for="e-textarea">{{ title }}</label>
    <textarea
      id="e-textarea"
      class="form-control"
      row="3"
      :value="value"
      v-on="listeners"
    >
    </textarea>
  </div>
</template>
<script>
import { FormGroupInput } from "@/components/NowUiKit";

export default {
  name: "e-textarea",
  components: {
    [FormGroupInput.name]: FormGroupInput
  },
  props: {
    title: String,
    value: String
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        input: this.updateValue
      };
    }
  },
  methods: {
    updateValue(value) {
      this.$emit("input", value);
    }
  },
  mounted() {
    console.log(this.components);
  }
};
</script>

<style src="@/assets/styles/css/input.css" />

When I write something in my TextArea Custom component from my Account.vue, my text value does not update and my listener function is not passed. Does I need to have something else?

• javascript
• html
• vue.js
• mvvm
• vuejs2

3 Answers 3

You can easily do this by v-model:

<textarea
  id="e-textarea"
  class="form-control"
  row="3"
 v-model="value"
>
</textarea>

it's equals to:

<textarea
  id="e-textarea"
  class="form-control"
  :value="value"
  @input="value = $event.target.value"> </textarea>

Hopefully it will save someone some time. In Vue.js 3 they changed this a bit compared the Vue.js 2 and i got it working with this:

<textarea :value="modelValue"
          @input="onInput" />

and the onInput method looks like this:

onInput: function (e) {
   this.$emit("update:modelValue", e.target.value);
}

of course you have to have the prop 'modelValue' on your 'e-textarea' component instead of value as it was the case in vue 2. i also added a watcher on this modelValue just in case it fails to update:

props: {
   modelValue: {
      type: String,
      default: null
   }
}
watch: {
   modelValue: function () {
      return this.modelValue;
   },
},

and yes, you use the component like so:

<e-textarea v-model="otherInformation" />

of course you can listen to the input event also if you want to, or need to for your specific case

you can also find more about this changes on here and here

Bind the value in your custom textarea and the input event:

CustomTextarea.vue

<template>
  <div class="form-group">
    <label for="e-textarea">{{ title }}</label>
    <textarea
      id="e-textarea"
      class="form-control"
      row="3"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
    </textarea>
  </div>
</template>
<script>
import { FormGroupInput } from "@/components/NowUiKit";

export default {
  name: "e-textarea",
  components: {
    [FormGroupInput.name]: FormGroupInput
  },
  model: {
    prop: "textAreaVue"
  },
  props: {
    title: String,
    value: String
  },
  computed: {
    listenerFunction() {
      return {
        ...this.$listener,
        input: this.updateValue
      };
    }
  },
  methods: {
    updateValue(value) {
      console.log("function has been passed");
      this.$emit("input", value);
    }
  },
  mounted() {
    console.log(this.components);
  }
};
</script>

<style src="@/assets/styles/css/input.css" />

And use it with v-model :

<custom-textarea
    title="Informations complémentaires"
    v-model="otherInformation"></custom-textarea>

More explanation here