dev02 dev02 - 1 year ago 441
HTML Question

VueJS: Getting values from multiple checkbox binding in textboxes

So I saw simple example of multiple checkboxes from Vue's Docs here. The value for each selected checkbox is added to bound array which is fine.

However for the app I am building I need similar functionality but I want to be able to show values of checked checkboxes in corresponding textboxes.

Here is example of that.

What I am looking for is value of each selected checkbox should be shown in corresponding textbox just below it.

N.B: I have really big form and form is generated dynamically which means I cannot create multiple bindings/data vars. I am looking for a way that just works based on main


I thought of adding
but it adds same value in all textboxes not the one above it.

This should be simple but I am new to Vue so cannot figure out how to do this.

Answer Source

Try the following code, I have made some changes in your code


<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames2">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames3">
<label for="mike">Mike</label>

<input type="text" v-model="checkedNames">
<input type="text" v-model="checkedNames2">
<input type="text" v-model="checkedNames3">


new Vue({
  el: 'body',
  data: {
    checkedNames: [],
    checkedNames2: [],
    checkedNames3: []

For dynamic inputs You can use something like this:


<div v-for="n in numberOfInputs">
  <input type="checkbox" name="jack{{n}}" id="jack{{n}}" value="Jack{{n}}" v-model="checkedNames[n]" >
  <label for="jack{{n}}">Jack{{n}}</label>
  <input type="text" v-model="checkedNames[n]">


var testComponent = new Vue({
  el: 'body',
  data: {
    checkedNames: [],
    numberOfInputs: 5  
  methods: {
    pageLoaded: function () {



Instead of v-for="n in 5" you can loop an array of form input data. You can create an array of form list and give a unique id(instead of n) of each item and loop it, to generate form items.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download