Question

我有我的聊天室，并且我不希望其他人发送空消息，因此我希望输入是必需的。感谢您的帮助。

我尝试在输入行中放入“ required ='required'”，我也尝试过veeValidate，但使用它时聊天中断，我也尝试在道具和数据中放入“ Required = true”，但没有好结果

这是ChatForm.vue

<template>
    <div class="input-group" >
        <input id="btn-input" type="text" name="message"  class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" @keyup.enter="sendMessage">

        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm"  id="btn-chat" @click="sendMessage">
                &#10003
            </button>
        </span>
    </div>
</template>

<script>


    export default {
        props: ['user'],

        data() {
            return {
                newMessage: '',
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                setTimeout(function() {
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    }, 200);
                this.newMessage = '';

            }

        }
    }


</script>

这是我在app.blade.php中的表格

  <div id="app" class="container-chat">

                    <div class="row">
                        <div class="col-md-12 col-md-offset-2">
                            <div class="col-md-12 col-md-offset-2">
                                <div class="panel-body panel-content" id="mess_cont">

                                    <chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
                                </div>
                                <div class="panel-footer">
                                    <chat-form
                                            v-on:messagesent="addMessage"
                                            :user="{{ Auth::user() }}"
                                    ></chat-form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

有些事情我会有所不同。

1 /将您的聊天表单包装在标记中，并在提交时执行sendMessage（）方法。这将为您的用户带来更好的体验，因为他们只需提交邮件即可。

2 /将按钮转换为提交按钮，以便触发form.submit事件。

3 /您可以通过检查newMessage是否包含内容来轻松禁用该按钮。我认为您不需要vee验证或其他任何方式即可实现这一目标；对于像聊天表格这样简单的内容，您的用户只需要看到一个禁用的按钮即可意识到自己需要先编写一些内容，而无需太多反馈。

4 /在addMessage方法中，您可以仅检查newMessage的内容，而在它为空时不执行任何操作。这很好，因为您已经通过禁用按钮来提示用户。

我认为这是一种引导用户的微妙方式，但不要过度使用。希望这会有所帮助。

Answer 2

尝试像这样更改您的ChatForm.vue：

<template>
 <form @submit.prevent="sendMessage">   
   <div class="input-group" >
     <input id="btn-input" type="text" name="message"  class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" required>

     <span class="input-group-btn">
       <button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
                &#10003
            </button>
        </span>
    </div>
</template>

您没有以正确的方式处理input，必需的input必须放在form内，而required关键字将阻止表单提交如果input字段为空。

Answer 3

请为您的所有表单元素添加名称属性。我表单中的某些元素具有 name 属性，而有些则没有。具有名称属性的元素工作正常，但没有名称的元素失败。

我如何获得vuejs所需的输入

3 个答案: