Vue.js 2 Design Patterns and Best Practices

Message list

We can display a list of messages on screen by creating a new component with a prop that accepts an array of messages. Create a new component inside the components folder named MessageList.vue:

<template> <div>  <span v-for="message in messages" :key="message.id">  <strong>{{message.username}}: </strong> {{message.message}}  </span> </div></template><script>export default { props: ['messages'],};</script><style scoped>div { overflow: scroll; height: 150px; margin: 10px auto 10px auto; padding: 5px; border: 1px solid gray;}span { display: block; padding: 2px;}</style>

This component is fairly simple; all it does is iterate over our messages array using the v-for directive. We pass the messages array into this component using the ...