Vue JS: как связать флажок со связанным выбором в простом примере Vue?

Question

У меня есть обзор пользователей.В моем примере пользователь может выбрать список пользователей и выбрать личную роль.

Но я действительно не понимаю, как заставить этот пример работать в Vue JS.Таким образом, я получаю обзор выбранных идентификаторов пользователей с их идентификаторами ролей выбора.

Кто может помочь и заставить этот пример работать ...?

    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
    })

<script src="https://vuejs.org/js/vue.min.js"></script>
Add new users:

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

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

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

Answer 1

Я подозреваю, что то, что вы хотите, чем-то похоже на то, что я сделал ниже:

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>

Структура данных очень похожа на вашу (я только изменил users с объекта на массив и то же самое для roles).

Хитрость здесь в том, что created Жизненный цикл экземпляра , который подготавливает объект form.users к данным.

Я также воспользовался условным рендерингом показывать выпадающий список ролей только в том случае, если выбран пользователь, поэтому DOM и дизайн более чистые.

Также возможно отображать пользователя в списке, только если выбрана роль, это так же просто, как изменить<div v-for="f in form.users" v-if="f.checked"> до <div v-for="f in form.users" v-if="f.checked && f.role !== ''">

Попробуйте, надеюсь, я смог вам как-то помочь!

Answer 2

Я не уверен, в каком контексте вы используете это. Но Vue - это структура, управляемая данными, если вы намерены что-то сделать с пользователями, которые прошли проверку и играют определенную роль, тогда вы можете направить свое внимание на пользователя. Это очень простой пример, но надеюсь, что вы начнете.

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>