如何获得 vuejs 所需的输入

Posted 2023-02-22

技术标签:

【中文标题】如何获得 vuejs 所需的输入【英文标题】：How can I get a input required with vuejs 【发布时间】：2019-09-24 19:57:45 【问题描述】：

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

我尝试在输入行中输入“required='required'”，我也尝试了 veeValidate，但在我使用它时它破坏了我的聊天，我还尝试在 Props 和数据中输入“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>

【问题讨论】：

您是否尝试过将输入内容封装在表单中？是的，它也不起作用您能否发布您面临的 Vuelidate 错误？下面是一个适合你的例子：

import Vuelidate from 'vuelidate'; import    required  from 'vuelidate/lib/validators';  export default  validations:      Message:        required

我的意思是，我没有错误，但是当我使用它时我的聊天消失了 【参考方案1】：

尝试像这样更改您的 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 字段为空，则必需的input 必须位于form 和required 关键字将阻止表单提交.

【讨论】：

【参考方案2】：

我会做一些不同的事情。

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

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

3/ 您可以通过检查 newMessage 是否有内容来轻松禁用按钮。我认为您不需要 vee validate 或其他任何东西来实现这一点；对于像聊天表格这样简单的东西，您的用户只需要看到一个禁用的按钮即可意识到他需要先写点什么。

4/ 在 addMessage 方法中，您可以只检查 newMessage 的内容，当它为空时不做任何事情。这很好，因为您已经通过禁用按钮来提示用户。

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

【讨论】：

感谢您的帮助，我会尽快给您反馈！【参考方案3】：

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