当用户按下键盘上的 Enter 键时,我们希望触发提交评论的动作,可以通过 Vue 中的事件修饰符和事件监听来实现。假设你有一个文本框输入评论,并希望按下 Enter 键触发提交操作,示例代码如下:
<template>
<div>
<input v-model="comment" @keyup.enter="submitComment" placeholder="输入评论并按 Enter 提交">
</div>
</template>
<script>
export default {
data() {
return {
comment: ''
};
},
methods: {
submitComment() {
// 在这里调用名为 storeComment 的方法提交评论
this.storeComment(this.comment);
// 提交后清空评论框
this.comment = '';
},
storeComment(comment) {
// 实际提交评论的操作,可以在这里发送请求等
console.log('提交评论:', comment);
}
}
};
</script>
在上面的示例中,@keyup.enter
是事件修饰符,它表示监听键盘事件,并在按下 Enter 键时触发 submitComment
方法。v-model
用于双向绑定评论输入框的内容,并在 submitComment
方法中调用 storeComment
方法来提交评论。
Was this helpful?
0 / 0