自定义输入组件上的vue更改事件

Question

我想在自定义输入组件上添加@change 事件。

这是我的组件：

<template>
  <div class="w-100">
    <div class="form-text">
      <input
        :value="value"
        @input="updateValue($event.target.value)"
        autocomplete="off"
        class="form-text__input"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormText',
  props: {
    value: {
      required: true,
      type: String
    }
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value)
    }
  }
}
</script>

这就是我使用它的方式：

       <form-text
          v-model="form.placeOfBirth"
        />

我想添加@change 事件。此事件应在用户开始输入输入时触发，而不是在数据来自 API 并且输入已填充时触发。

Answer 1

在模板中：

    <input
    ...
    @keyup="onKeyUp"
    />

在代码中：

    methods: {
        onKeyUp(event) {
          this.$emit('change', event)
        }
    }

请注意，每次按键后都会触发此事件。