Vue.Js Form Input Bindings
Vue.Js Form Input Bindings:–We can use v-model directive for two way data binding to updta input fields and textarea element of forms. Today we will learn how to update input form’s controls by using javascript objects.
Today itself we are going to discuss some real time scenarios where we can use these v-model directive.
Look at below example to see how checkbox buttons getting changed when user clicks on them.
Vue.Js Form Input Bindings | Example
A form is imporatnt part of any web application and the functionality of form may vary from app to app. So in here we have a focus all necessary element of form which will play their own actions differenty and this you will see in below examples.
Toggling a Checkbox | Example
This tutorial gives you a complete reference ragarding all necessary stuff which you need while work with form’s elements radio button,select boxes and buttons etc.
Have you ever tried these scenarios ; this topic is a complete guide for you which will teach you all required things in depth not even a single can miss if you follw complete tutorial.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app-2"><label for="knockout">{{ result }}</label> <input name="knockout" type="checkbox" /> <label for="react">{{ message }}</label> <input name="react" type="checkbox" /> <label for="Angular">{{ answer }}</label> <input name="Angular" type="checkbox" /></div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
result:false,
message:false,
answer:false
}
})
</script>
|
Above example shows how a checkbox toggles itself when clicks on it. In this example v-model plays all important roles required for desired actions of toggling a checkbox.
Initially all values(result,message,answer) are “false” but view template is getting updated immediately when user itself fires a click event onto them independently
that means v-model’s values updates corresponding checkbox.
CheckBox Fundamentals | V-model | Example
Here in this example we will explain the concept of v-model directive which plays runtime time binding on views using javascript object.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app">
<!--<button v-on:click="reverseMessage">Reverse Message</button>
--> Please verify the answer whether is correct if not demark the tick:
{{ }}
<label for="knockout">(a).10</label> <input name="knockout" type="checkbox" /> <label for="react">(b).20</label> <input name="react" type="checkbox" /> <label for="vuejs">(c).30</label> <input name="vuejs" type="checkbox" /> <label for="nodejs">(d).40</label> <input name="nodejs" type="checkbox" />
</div>
<script>
var model = new Vue({
el: '#app',
data: {
checked: false,
variable: true,
bool: false,
unchecked: true
}
})
</script>
|
Above example shows how a checkbox toggles itself when clicks on it. In this example v-model plays all important roles required for desired actions of toggling a checkbox.
Initially all values (result,message,answer) are “false” but view template is getting updated immediately when user itself fires a click event onto them independently
that means v-model’s values updates corresponding checkbox.
Handling Multiple CheckBoxes | Example
Handling multiple checkboxes by using v-model is defined very well in below example.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app"><input id="jack" type="checkbox" value="first option" /> <label for="a">A</label> <input id="john" type="checkbox" value="second option" /> <label for="b">B</label> <input id="mike" type="checkbox" value="third option" /> <label for="c">C</label>
Checked Answer: {{ checkedAnswer }}</div>
<script>
var model = new Vue({
el: '#app',
data: {
checkedAnswer: []
}
})
</script>
|
Below example demonstrates usage of v-for directive clearly which helps to list out the option’s text items because it works almost similar to for-each loop like other languages.
So now onwards see the example below and try code on your machine to test the output. For your convenience we have attached screenshot of output.
Handling SelectBoxes using v-for Directive | Example
You have seen selectbox handling in basic scripting language like in html but in here it’s working is completely different because Vue.Js applies some directive to show item lists on browser screen and rest of part is to change the view.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app"><select>
<option>{{ option.text }} <!--
<option>A</option>
<option>B</option>
<option>B</option>--></option>
</select>Selected: {{ selected }}</div>
<script>
var app2 = new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
|
Here a line v-bind:value=”option.value”will see in above code which will help to create more structured select box options. If you comment that part then you will see some odd type of listings of select boxes items.
In this example some tricky thing you can observe here is options array which is used by v-model directive so when user clicks on a perticular select item key like ‘Two’; will give the corresponding value i.e. ‘B’ thats all about v-model and v-bind working example scenario.
Hence depending upon the business requirement both directive will work differently that we will see in upcoming tutorials.
Advertisements
