DEV Community

Cover image for Two way data binding in Vue

Posted on

Two way data binding in Vue

Sometimes we need to bind the value of a field and we need to change the data on the Vue instance in real time. If we use the standard bind we used in a tutorial of this series before, it would not work. In order to do that, we must use the v-model directive:

<!DOCTYPE html>
  <meta charset="utf-8">
  <div id="demo">
    {{ realTimeString }}
    <input type="text" name="string" v-model="realTimeString">
<script src=""></script>
<script type="text/javascript">

  new Vue({
  el: '#demo',
  data: {
    realTimeString : ""


Enter fullscreen mode Exit fullscreen mode

We'll see how the string over the field will change according to what we type in that field.

Top comments (0)