title: How can I get a input required with vuejs
body: <p>I have my chat and I dont want people to send empty message so I would like that my input become required. Thanks for your help.</p>
  
  <p>I tried to put "required='required'" in the input line, I also tried veeValidate but it broke my chat when I use it, I also tried to put "Required = true" in Props and data but without a good result</p>
  
  <p>This is ChatForm.vue </p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="input-group" &gt;
          &lt;input id="btn-input" type="text" name="message"  class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" @keyup.enter="sendMessage"&gt;
  
          &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-primary btn-sm"  id="btn-chat" @click="sendMessage"&gt;
                  &amp;#10003
              &lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  
      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 = '';
  
              }
  
          }
      }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is my form in the app.blade.php</p>
  
  <pre><code>  &lt;div id="app" class="container-chat"&gt;
  
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12 col-md-offset-2"&gt;
                              &lt;div class="col-md-12 col-md-offset-2"&gt;
                                  &lt;div class="panel-body panel-content" id="mess_cont"&gt;
  
                                      &lt;chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()-&gt;id}}"&gt;&lt;/chat-messages&gt;
                                  &lt;/div&gt;
                                  &lt;div class="panel-footer"&gt;
                                      &lt;chat-form
                                              v-on:messagesent="addMessage"
                                              :user="{{ Auth::user() }}"
                                      &gt;&lt;/chat-form&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>