Question

使用Vue.js，我正在尝试向keydown上的<input>事件添加条件事件处理程序。如果不满足条件，我想完全避免添加点击处理程序。我遵循了Evan You的建议：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 : {},
}>

这是添加条件事件处理程序的正确方法还是其他替代方法？谢谢！

Answer 1

您应该能够执行以下操作……

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

或者您可以只使用render()函数而不是<template>

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

Answer 2

如果您需要使用一些必须转到父组件的事件，则可以这样编写：

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

如何在Vue.js中正确添加条件事件绑定？

2 个答案: