Question

我对用户有一个概述。在我的示例中，用户可以选择用户列表并选择个人角色。

但我真的不明白如何让这个例子在Vue JS中运行。因此，我将通过其选择者角色ID获得所选用户ID的概述。

谁可以帮助并使这个例子有效......？

    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

我不确定你在哪种情况下使用它。但是Vue是一个数据驱动的框架，如果您打算对已经检查并具有角色的用户做一些事情，那么您可以将注意力集中在用户身上。这是一个非常基本的例子，但希望它能让你开始。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

我怀疑你想要的东西与我在下面所做的有些相似：

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 Instance Lifecycle，它会为数据准备form.users个对象。

我还利用conditional rendering仅在选择用户时显示角色下拉列表，这样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 !== ''">

一样简单

尝试一下，我希望我能以某种方式帮助你！

Vue JS：如何在简单的Vue示例中绑定一个带有相关select的复选框？

2 个答案: