Vue.js 2 and Bootstrap 4 Web Development

Making things functional with Vue.js

So, what do we want to achieve with our form? We want the new message to be created. This message has to be composed of title, text, and the timestamp. We also want to add this message to our messages reference array.

Let's call this new message newMessage and add it to the data attributes of App.vue:

//App.vue
<script>
  <...>
  export default {
    data () {
      return {
        newMessage: {
          title: '',
          text: '',
          timestamp: null
        }
      }
    },
  <...>
  }
</script>

Now, let's bind the title and the text of this newMessage object to input and textarea of our form. Let's also bind a method called addMessage to the submit handler of our form so that the whole form's markup looks like this:

<template>
<...>
  <form @submit="addMessage"> <div ...