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

Posted 2021-03-30

使用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 : {},
}>

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

答案

你应该可以做这样的事......

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

另一答案

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

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