Vue.js More 2 Way Binding

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

In this post I revisit the idea of 2 way data binding, for some reason. Not much has changed from the first time I covered it in an earlier post, we'll still use the v-model on the form field that we want to use, then simply reference elsewhere on the page (but still in the div="app" section) using {{logName}} and {{logAge}}.

In the script tag you still have to declare the age and name vars so that the 2 way binding will work from there (the vue instance).

Notice the conspicuous absence of any vue.js methods; we simply don't need them for 2 way binding. Just a declaration of the vars in the vue instance, then the reference in the code above where ever we want to echo the binding.

Keyboard Events

{{logName}}

{{logAge}}


<!doctype html>

<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>

</head>
<body>

<div id="app"> <h3>Keyboard Events</h3> <label>Name: </label> <input type="text" v-model="logName" /><span>{{logName}}</span><br><br> <label>Age: </label> <input type="text" v-model="logAge" /><span>{{logAge}}</span> </div> </body> <script> var vm = new Vue({ el:'#app', data: { logAge: '', logName: '' } }) </script> </html>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-more-2-way-binding/