Javascript 如何获得vuejs所需的输入

我有我的聊天室，我不希望人们发送空消息，所以我希望我的输入成为必需的。谢谢你的帮助

我试着在输入行中输入“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>

✓
导出默认值{
道具：['user']，
数据（）{
返回{
新消息：“”，
}
},
方法：{
sendMessage（）{
此.$emit（'messagesent'{
用户：this.user，
message:this.newMessage
});
setTimeout（函数（）{
const messages=document.getElementById（'mess_cont'）；
messages.scrollTop=messages.scrollHeight；
}, 200);
this.newMessage=''；
}
}
}

这是我在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>

---

有几件事我会做得不同

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

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

3/通过检查newMessage是否包含内容，可以轻松禁用该按钮。我不认为你需要vee validate或其他任何东西来实现这一点；对于像聊天表单这样简单的东西，你的用户不需要比看到一个禁用的按钮更多的反馈就可以意识到他需要先写一些东西

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

---

我认为这是一个微妙的方式，你引导你的用户，但不要过分。希望这能有所帮助。

尝试如下更改您的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

必需的

必须位于
表单中，并且
required
关键字将阻止表单提交。
您是否尝试将您的输入包装在表单中？是的，它也不起作用。请发布您在Vuelidate中遇到的错误？下面是一个适用于您的示例：
import Vuelidate from'Vuelidate'；从“vuelidate/lib/validators”导入{required}；导出默认{validations:{Message:{required}}}
我的意思是，我没有错误，但是当我使用itThx为您提供帮助时，我的聊天消失了，我会尽快给您反馈！