Как я могу получить вход, необходимый с vuejs

Question

У меня есть чат, и я не хочу, чтобы люди отправляли пустые сообщения, поэтому я хотел бы, чтобы мой ввод стал обязательным. Спасибо за вашу помощь.

Я попытался поместить «required = 'required'" во входную строку, я также попробовал veeValidate, но он сломал мой чат, когда я его использую, я также попытался поместить «Required = true» в Props и данные, но без хороший результат

Это 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

Попробуйте изменить свой 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 2

Есть несколько вещей, которые я бы сделал по-другому.

1 / Оберните форму чата в тег и выполните метод sendMessage () при отправке.Это даст вашим пользователям более приятный опыт, поскольку они могут просто отправить сообщение.

2 / Преобразовать кнопку в кнопку отправки, чтобы она вызывала событие form.submit.

3 /Вы можете легко отключить кнопку, проверив, имеет ли newMessage содержимое.Я не думаю, что вам нужно проверять или что-то еще, чтобы достичь этого;для чего-то такого простого, как форма чата, вашему пользователю не нужно гораздо больше отзывов, чем видеть отключенную кнопку, чтобы понять, что ему нужно сначала что-то написать.

4 / в методе addMessage вы можете простопроверить содержимое newMessage и не делать ничего, когда он пуст.Это прекрасно, потому что вы уже намекнули пользователю, отключив кнопку тоже.

Я думаю, что это тонкий способ, которым вы ведете своего пользователя, но не переусердствуйте.Надеюсь, это поможет.