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

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

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

1 个答案: