Forem

Cover image for Two way data binding in Vue
mattiatoselli
mattiatoselli

Posted on

1 1

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>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div id="demo">
    {{ realTimeString }}
    <br>
    <input type="text" name="string" v-model="realTimeString">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">


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

</script>

</body>
</html>
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)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More