Pie*_*her 8 javascript vue.js vue-component vuejs2
我正在尝试实现类似松弛的功能,只有在按下确切输入时才会发送消息(没有按下移位)
考虑
<textarea type="text" v-model="message" @keyup.enter.exact="sendMessage($event)"></textarea>
使用此组件的此vue模板
export default {
name: 'Typing',
data() {
return {
message: null
}
},
methods: {
sendMessage(e) {
// e.stopPropagation() and e.preventDefault() have no impact
this.$socket.emit('message', { text: this.message });
console.log(this.message); // Print the message with another '\n' at the end due to textarea default behavior
}
}
}
有没有人知道如何避免使用最后一个'\n'而不使用正则表达式删除它然后再发送到后端(我认为这将是脏的)？
谢谢
PS:我对VueJS堆栈很新,希望我的问题不明显
编辑:这个问题类似,但建议的解决方案不起作用
Win*_*ing 21
<textarea
type="text"
v-model="message"
@keyup.enter.exact="sendMessage($event)"
>
</textarea>
代码在键sendMessage的keyup事件上调用方法Enter.该keyup事件被触发后,该键已被释放.因此,代码在按下键后,在键运行(输入换行符)和键释放后的默认行为之后调用方法.preventDefault因为在keyup事件发生之前已经发生了试图阻止的行为,所以不会阻止该问题.
我们已经确定了以下内容:
keyup已经发生默认行为后触发该事件.解决方案是防止keydown事件的默认行为并在事件上调用方法keyup.
注意:仅在
keyup事件上调用方法以避免多次调用(如果用户按住键),这一点很重要.
<textarea
v-model="value"
@keydown.enter.exact.prevent
@keyup.enter.exact="send"
@keydown.enter.shift.exact="newline"
>
</textarea>
当按下Enter+ Shift组合时,可以调用将新行附加到textarea值的方法.
以下是演示解决方案中描述的所有行为的片段.
new Vue({
template: `
<div>
<textarea
v-model="value"
@keydown.enter.exact.prevent
@keyup.enter.exact="send"
@keydown.enter.shift.exact="newline"
>
</textarea>
</div>
`,
data: {
value: '',
},
methods: {
newline() {
this.value = `${this.value}\n`;
},
send() {
console.log('========');
console.log(this.value);
console.log('========');
},
},
}).$mount('#root');<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
</body>
</html>小智 9
您的问题的解决方案很简单：
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
sendMessage () {
console.log(this.message, this.message.length)
// this.$socket.emit('message', {text: this.message});
// clear textarea: this.message = ''
}
}
})<div id="app">
<textarea v-model="message" @keydown.enter.exact.prevent="sendMessage"></textarea>
</div>
<script src="https://unpkg.com/vue"></script>尝试使用 Vue 内置prevent
<textarea type="text" v-model="message" @keyup.enter.exact.prevent="sendMessage($event)"></textarea>