vue.js - 自定义输入组件上的vue更改事件
问题描述
我想@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 并且输入已填充时触发。
解决方案
在模板中:
<input
...
@keyup="onKeyUp"
/>
在代码中:
methods: {
onKeyUp(event) {
this.$emit('change', event)
}
}
请注意,此事件将在每次按下按键后触发。
推荐阅读
- r - 试图在 R 中生成“比例内的比例”图
- virtual-serial-port - 如何使 com0com 端口显示为真实的物理端口?
- java - 如何通过java中的构造函数验证输入
- python-3.x - 如果另一个列表中的两个项目连续出现,如何将字符添加到列表中?Python
- c# - C# Selenium:缺少轮询间隔使条件失败
- c# - 我如何最小化这个 IRepository?
- ios - 存储共享 Safari 凭据时出现 SecAddSharedWebCredential 静默错误 - 应用审核失败
- html - 联系表格获取消息
- python - 基于Python中的对象键从列表中检索对象的元素
- python - “ValueError:需要超过 X 值来解包”迭代不完整元组的 Python 方式?