title: Passing key-event through to a component in Vue and Typescript
body: <p>I'm kind of new to Vue, so please correct me if I'm formulating the question in a wrong way.</p>
  <p>Use Case:</p>
  <p>I have a very simple form it contains a TextField &quot;Name&quot; and a Button &quot;Create&quot;.
  When the user have written a name then I wish that the user can press &quot;Enter&quot; to create the entity.</p>
  <p>Code and findings:</p>
  <p>I followed the instructions on how to pass events to a input field from the page below</p>
  <p><a href="https://v2.vuejs.org/v2/guide/events.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/events.html</a></p>
  <p>When I use a input field it works as expected. Like this <code>&lt;input @keyup.enter=&quot;createCollection&quot; /&gt;</code></p>
  <p>But we are using TextField in a component for various reasons and I cannot get it to work.
  I have tried to get it working by trying a lot of different things, but for simplicity I just mention how I do now(or think it should work.).</p>
  <pre><code>      &lt;FormValidatedText
          :label-text=&quot;$t('COLLECTION_CREATE')&quot;
          :value=&quot;collection.name&quot;
          :min-length=&quot;3&quot;
          :max-length=&quot;30&quot;
          :required=&quot;true&quot;
          :input-id=&quot;'collection'&quot;
          :invalid=&quot;!formIsValid&quot;
          class=&quot;inline-form-field&quot;
          @input=&quot;collectionFormNameChanged($event)&quot;
          @validation=&quot;validCollectionName = $event&quot;
          @keyup.enter=&quot;createCollection()&quot;
        /&gt;
  </code></pre>
  <p>Other information and code:</p>
  <p>The Component</p>
  <pre><code>&lt;template&gt;
    &lt;div :class=&quot;{ invalid: touched &amp;&amp; (valid === false || invalid === true) }&quot;&gt;
      &lt;label class=&quot;small-label&quot; :for=&quot;inputId&quot;&gt;{{ labelText }}&lt;/label&gt;
      &lt;input :id=&quot;inputId&quot; type=&quot;text&quot; class=&quot;field-value&quot; :value=&quot;value&quot; @input=&quot;onTextChange&quot; @blur=&quot;isTouched&quot; /&gt;
      &lt;ul v-if=&quot;touched &amp;&amp; !valid&quot; class=&quot;field-value-errors&quot;&gt;
        &lt;li v-for=&quot;(error, index) in errors&quot; :key=&quot;index&quot;&gt;
          {{ $t(error.message, { variable: error.variable }) }}
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { Component, Mixins } from 'vue-property-decorator';
  import ValidateTextMixin from '@/components/Form/ValidateTextMixin.vue';
  @Component
  export default class FormValidatedText extends Mixins(ValidateTextMixin) {}
  &lt;/script&gt;
  </code></pre>
  <p>The Mixin that the Component uses</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
  import { Component, Vue, Prop } from 'vue-property-decorator';
  @Component
  export default class ValidateTextMixin extends Vue {
    @Prop({ default: '' }) value!: string;
    @Prop({ required: true }) readonly inputId!: string;
    @Prop({ required: true }) readonly labelText!: string;
    @Prop({ default: false }) readonly required!: boolean;
    @Prop({ default: false }) readonly invalid!: boolean;
    @Prop() readonly minLength?: number;
    @Prop() readonly maxLength?: number;
  
    protected changed: boolean = false;
    protected touched: boolean = false;
    protected valid: boolean = false;
    protected errors: any[] = [];
  
    onTextChange($event: { target: HTMLInputElement }) {
      this.isValid($event.target.value);
      this.$emit('input', $event.target.value);
    }
  
    isValid(value: string) {
      this.valid = true;
      this.errors = [];
      if (this.required &amp;&amp; !value) {
        this.valid = false;
        this.errors.push({ message: 'REQUIRED_FIELD_ERROR' });
      }
      if (this.minLength &amp;&amp; value.length &lt; this.minLength) {
        this.valid = false;
        this.errors.push({
          message: 'MINLENGTH_ERROR',
          variable: this.minLength
        });
      }
      if (this.maxLength &amp;&amp; value.length &gt; this.maxLength) {
        this.valid = false;
        this.errors.push({
          message: 'MAXLENGTH_ERROR',
          variable: this.maxLength
        });
      }
      this.$emit('validation', this.valid);
    }
  
    isTouched() {
      if (!this.touched) {
        this.isValid(this.value);
      }
      this.touched = true;
    }
  }
  &lt;/script&gt;
  
  </code></pre>
  <h1>Thanks for you help</h1>
  <hr />
  <p><strong>Final implementation</strong></p>
  <p>Based on the answer from <strong>Ahmad Mobaraki</strong>. Please give him your vote if you think this is helpful =)</p>
  <p>The component</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
  import { Component, Mixins } from 'vue-property-decorator';
  import ValidateTextMixin from '@/components/Form/ValidateTextMixin.vue';
  @Component
  export default class FormValidatedText extends Mixins(ValidateTextMixin) {
  
    created() {
      window.addEventListener('keyup', (event) =&gt; {
        if (event.keyCode == 13) { // on enter
          this.$emit('enterpressed');
        }
      });
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>And the usage of the Component</p>
  <pre><code>      &lt;FormValidatedText
          :label-text=&quot;$t('COLLECTION_CREATE')&quot;
          :value=&quot;collection.name&quot;
          :min-length=&quot;3&quot;
          :max-length=&quot;30&quot;
          :required=&quot;true&quot;
          :input-id=&quot;'collection'&quot;
          :invalid=&quot;!formIsValid&quot;
          class=&quot;inline-form-field&quot;
          @input=&quot;collectionFormNameChanged($event)&quot;
          @validation=&quot;validCollectionName = $event&quot;
          @enterpressed=&quot;createCollection&quot;
        /&gt;
  </code></pre>