[Vuejs]-Vue JS: how bind an checkbox with related select in simple Vue example?

by

2👍

✅

I suspect that what you want is somewhat similar to what I did below:

var data = {
    users: [
        { id: 1, name: 'John'},
        { id: 2, name: 'Donald'}
    ],
    roles: [
        { id: 1, name: 'Administrator'},
        { id: 2, name: 'Editor'}
    ],
    form: {
        users: []
    }
}

var demo = new Vue({
    el: '#demo',
    data: data,
    created: function () {
        this.form.users = this.users.map(el => {
            return {
                id: el.id,
                role: '',
                checked: false
            };
        });
    }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Add new users:

<div id="demo">
    <div class="row" v-for="(user, index) in users">
        <div class="col s6">
            <label>
                <input type="checkbox"
                 v-bind:value="user.id" v-model="form.users[index].checked">
                <span>{{ user.name }}</span>
            </label>
        </div>
        <div class="col s6" v-if="form.users[index].checked">
            <select class="browser-default" v-model="form.users[index].role">
                <option v-for="role in roles" v-bind:value="role.id">
                    {{ role.name }}
                </option>
            </select>
        </div>

    </div>
    <br/>
    Selected users + role:

    <div v-for="f in form.users" v-if="f.checked">
        User ID: {{ f.id }} -> Role id: {{ f.role }}
    </div>
</div>

The data structure is very similar to yours (I only changed the users from object to array, and the same for roles).

The trick here is the created Instance Lifecycle that prepares the form.users object to the data.

I also took advantage of conditional rendering to only show the roles dropdown if the user is selected, that way the DOM and design is cleaner.

It’s also possible to only show the user in the list if a role is selected, it’s as easy as changing from <div v-for="f in form.users" v-if="f.checked"> to <div v-for="f in form.users" v-if="f.checked && f.role !== ''">

Try it out, I hope I was able to help you somehow!

👤Feel The Noise

2👍

I am not sure in which context you are using this. But Vue is a data driven framework, if your intention is to do something with the users which have been check and have a role, then you can direct your focus to the user. This is a very basic example but hope it get you started.

var data = {
        
        users: [ 
          { id: 1, name: 'John', check: false, role:'' }, 
          { id: 2, name: 'Donald', check: false, role:''} 
        ],
        roles: [
          { id: 1, name: 'Administrator'}, 
          { id: 2, name: 'Editor'} 
        ],
    };

    var demo = new Vue({
        el: '#demo',
        data: data,
        computed: {
          checkUsers: function() {
            return this.users.filter(function(user) {
              return user.check === true;
            })
          }
        }
 
    })
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.min.js"></script>
Add new users:

  <div id="demo">

    <div class="row" v-for="user in users">
      <div class="col s6">
          <label>
          <input type="checkbox"    
                     v-model="user.check"/>
              <span>{{ user.name }}</span>
          </label>
      </div>
      <div class="col s6">
          <select class="browser-default"
                  v-model="user.role">
              <option v-for="role in roles"   :value="role.name" >{{ role.name }}</option>
          </select>
      </div>
      <br/>
      
      Selected users + role:
    </div> 
          <div v-for="user in checkUsers">
            {{ user.name }}
            {{ user.role }}
        
      </div>
  </div>


</body>
</html>
👤Eli

Leave a comment