Question

我试图建立一个小的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>

有人可以告诉我发生了什么事吗？

谢谢

Answer 1

您的代码没有问题，并且可以在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);
            }
        }
    }
});

https://jsfiddle.net/OzanKurt/ewbz7m84/4/

Vue.js Keyup事件不起作用

1 个答案: