Two-way data binding to inputs in Vue

Now we will learn how to work with inputs in the Vue framework. With their help, we will add data to the page reactively. Let's get started. Let's say we have an input:

App.vue<template>
  <input>
</template>

Let us also have a property message:

javascriptdata() {
  return {
    message: 'hello',
  }
}

We can link this property and the input so that changing either one will change the other. This is done using the v-model directive, which specifies the property that is bound to the input.

Let's bind the message property to our input:

App.vue<template>
  <input v-model="message">
</template>

After running the code, the input will contain the property text message. And if you edit the data in the input, the property will also change accordingly. To see this, let's output the content entered in the input somewhere in a paragraph:

App.vue<template>
  <input v-model="message">
  <p>{{ message }}</p>
</template>