Vue.js 2 Cookbook

Two-way data binding

The v-on attribute will have you covered in most cases, especially if the event comes from the element. On the other hand, it may sometimes be too verbose for some tasks.

For example, if we had a textbox and we wanted to update a variable with the content of the textbox and ensure that the textbox always has an updated value of the variable (which is called two-way data binding), we would have to write a couple of handlers.

Instead, this operation is carried out by the v-model attribute, as the following code shows:

<div id="app">   <button v-on:click="toast">Toast bread</button>   <input v-model="toastedBreads" />   Quantity to put in the oven: {{toastedBreads}} </div>new Vue({   el: '#app',   methods: {     toast () {  this.toastedBreads++ ...