Vue.js 2 Design Patterns and Best Practices

Adding messages to the list

Create a new component inside of the components folder named MessageForm.vue. This will serve to input messages into the list.

We can start off with the following:

<template>  <form @submit.prevent="sendMessage">    <div>      <label for="username">Username:</label>      <input type="text" name="username" v-model="username">    </div>    <div>      <label for="message">Message:</label>      <textarea name="message" v-model="message"></textarea>    </div>    <button type="submit">Send</button>  </form></template><script>export default {  data() {    return {      username: '',      message: '',    };  },};</script><style>input,textarea {  margin: 5px;  width: 100%;}</style>

This essentially allows us to capture user input for both the selected username and message. We ...