Как правильно добавить привязку условного события в Vue.js ?

#javascript #vue.js

Вопрос:

Используя Vue.js и я пытаюсь добавить обработчик условного события к keydown событию в <input> . Я хочу вообще не добавлять обработчик кликов, если условие не выполнено. Я последовал предложению Эвана Ю:https://github.com/vuejs/vue/issues/7349#issuecomment-354937350

Я получаю сообщение об ошибке Cannot read property '_wrapper' of null для следующего:

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

Я также попытался передать пустой объект, но получил другую ошибку, в которой говорилось: handler.apply is not a function для следующего:

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

Это правильный способ добавления обработчиков условных событий или есть другие альтернативы? Спасибо!

1. почему бы просто не использовать проверку if else внутри функции?

2. @DhananjaiPai Я пытаюсь вообще избежать привязки обработчика кликов, если это условие — fieldData.fixedLength — не выполнено

3. Мне просто интересно, зачем беспокоить всю перегруженную логику? Вы фактически пытаетесь привязывать, отсоединять и повторно привязывать каждый раз, когда изменяется длина fieldData?

4. Не совсем. Я просто проверяю, является ли fieldData.length доступным свойством. Это свойство жестко запрограммировано. Если это доступно, моя цель — добавить обработчик события к входным данным

5. Это вообще не исключает привязки обработчика. Он просто условно вызывает функцию при нажатии клавиши или пытается вызвать null or {} как функцию, из-за чего вы получаете ошибку.

Ответ №1:

Вы должны быть в состоянии сделать что-то вроде этого…

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

Или вы можете просто использовать render() функцию вместо <template>

Используя функцию рендеринга…

 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);
}

1. Неплохо. Как бы выглядел этот синтаксис, если бы у меня были другие обработчики событий для того же элемента? Прямо сейчас я настроил как v-on="{ blur: validate, focus: showLabel, keydown: fieldData.fixedLength ? inputEnforceMaxlength : {}, keypress: fieldName === 'Phone' ? inputMaskTel : {} }"

2. В этом случае я бы просто использовал функцию рендеринга .

Ответ №2:

Если вам нужно использовать некоторые события, которые должны передаваться родительскому компоненту, вы можете написать что-то вроде этого:

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