How to properly add conditional event binding in Vue.js?

Question

Using Vue.js and I am trying to add a conditional event handler to the keydown event on an <input>. I want to avoid adding the click handler at all if the condition is not met. I followed Evan You's suggestion: https://github.com/vuejs/vue/issues/7349#issuecomment-354937350

I'm getting an error saying Cannot read property '_wrapper' of null for the following:

<input v-on: {
  keydown: fieldData.fixedLength ? inputEnforceMaxlength : null,
}>

I also tried passing an empty object but got a different error saying: handler.apply is not a function for the following:

<input v-on: {
  keydown: fieldData.fixedLength ? inputEnforceMaxlength : {},
}>

Is this the proper way to add conditional event handlers or are there are other alternatives? Thanks!

@DhananjaiPai I'm trying to avoid binding the click handler at all if that condition--fieldData.fixedLength-- is not met — bhood
– bhood, Commented Mar 15, 2019 at 11:43
I was just wondering why bother the entire overloaded logic ? You are effectively trying to bind,unbind and rebind every-time the fieldData length changes? — Dhananjai Pai
– Dhananjai Pai, Commented Mar 15, 2019 at 11:45
Not really. I'm just checking if fieldData.length is an available property. That property is hardcoded. If it is available, my aim is to add the event handler to the input — bhood
– bhood, Commented Mar 15, 2019 at 11:47
That doesn't avoid binding a handler at all. It just conditonally calls a function on keypress or tries to call null or {} as a function which is why you get the error. — Rob
– Rob, Commented Mar 15, 2019 at 11:49

tony19 · Accepted Answer · 2022-07-15 21:12:06Z

4

You should be able to do something like this...

<input v-on="fieldData.fixedLength ? { keydown: inputEnforceMaxlength } : null">

Or you can just use a render() function instead of a <template>

Using a render function...

render(h) {
    const data = {
        on: {
            blur: this.validate,
            focus: this.showLabel,
        },
    };

    if (this.fieldData.fixedLength) {
        data.on.keydown = this.inputEnforceMaxlength;
    }

    if (this.fieldName === 'Phone') {
        data.on.keypress = this.inputMaskTel;
    }

    return h('input', data);
}

edited Jul 15, 2022 at 21:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 15, 2019 at 11:52

Rob

12.9k4 gold badges44 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bhood Over a year ago

Nice. What would that syntax look like if I had other event handlers for the same element? Right now I have set up as

v-on="{         blur: validate,         focus: showLabel,         keydown: fieldData.fixedLength ? inputEnforceMaxlength : {},         keypress: fieldName === 'Phone' ? inputMaskTel : {}       }"

Rob Over a year ago

In that case i would just use a render function.

Alex · Accepted Answer · 2019-03-15 12:03:44Z

0

If you need to use some events, that must go to the parent component, you can write smth like this:

<template>
  <input v-on="customEvents" />
</template>
<script>
  export default {
    computed: {
      customEvents: () => {
        return [
          ...this.$listeners,
          this.fieldData.fixedLength && { keydown: this.inputEnforceMaxlength }
        ];
      }
    }
  }
</script>

answered Mar 15, 2019 at 12:03

Alex

1,4239 silver badges16 bronze badges

1 Comment

George Over a year ago

This just extracts what they're trying to do into a child component, can you add how this would answer the question.

Collectives™ on Stack Overflow

How to properly add conditional event binding in Vue.js?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related