Vuejs Keyup事件不工作
Vuejs Keyup事件不工作
提问于 2018-08-18 05:24:33
我正在尝试建立一个小的Laravel/Vuejs聊天室，当我试图从具有keyup事件的输入字段中获取一些数据并将其推送到数组中时，我遇到了一些问题。它不能很好地工作，也不能在控制台上显示任何错误。
这是我的代码：
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('message', require('./components/message.vue'));
const app = new Vue({
el: '#app',
data: {
message: '',
chat:{
message:[]
}
},
methods:{
send(){
if(this.message.length != 0) {
this.chat.message.push(this.message);
}
}
}
});message.vue
<template>
<li class="list-group-item"></li>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>chat.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<style>
.list-group{
margin-top:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row" id="app">
<ul class="list-group offset-4 col-4">
<li class="list-group-item active">Chat Room</li>
<message></message>
<input v-model='message' @keyup.enter='send' type="text" class="form-control" name="" id="" placeholder="Type your message">
</ul>
</div>
</div>
<script src="{{'js/app.js'}}"></script>
</body>
</html>有没有人能告诉我到底是怎么回事？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-18 05:33:01
您的代码没有任何问题，并且可以在jsFiddle上运行：
<div id="app">
{{ chat }}
<ul class="list-group offset-4 col-4">
<li class="list-group-item active">Chat Room</li>
<message></message>
<input v-model='message' @keyup.enter='send' type="text" class="form-control" placeholder="Type your message">
</ul>
</div>
const app = new Vue({
el: '#app',
data: {
message: '',
chat:{
message:[]
}
},
methods:{
send(){
alert();
if(this.message.length != 0) {
this.chat.message.push(this.message);
}
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51903066
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号