如何获得 vuejs 所需的输入

Question

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

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

原文由 Bastos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

You are not treating the input in the correct way, the input which is required needs to be inside a form and the required keyword如果 input 字段为空，将阻止表单提交。

原文由 asimhashmi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Mohit Satish Pawar 发布，翻译遵循 CC BY-SA 4.0 许可协议