Vue JS：如何在简单的 Vue 示例中将复选框与相关选择绑定？答案

【问题标题】：Vue JS: how bind an checkbox with related select in simple Vue example?Vue JS：如何在简单的 Vue 示例中将复选框与相关选择绑定？
【发布时间】：2018-05-10 18:49:12
【问题描述】：

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

但我真的不明白如何让这个示例在 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>

【问题讨论】：

1.用户对象中的id是用户id吗？ 2.角色对象中的id是角色id吗？ 3. 你想要用户的下拉列表吗？ 4. 您是否希望将角色复选框选择为所选用户（在下拉列表中选择的用户）的角色？
@shivam Singh 1. 是 2. 是 3. 否我会得到这样的结果：“选定的用户：{ { user_id: 1, role_id: 2 }, { user_id:2, role_id: 1 } }
角色下拉是否需要添加到最终列表结果中？
@Feel The Noise：每个用户的角色下拉列表：如果我有 10 个用户，我就有 10 个角色下拉列表。
@angelique000 看看我的回答，也许对你有帮助

标签： javascript vue.js vuejs2 vue-component

【解决方案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 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 进行愉快的编码：D

【解决方案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>

【讨论】：

很好的解决方案！
@FeelTheNoise 谢谢 :) 我不是 Vue 专家，但这似乎是一个好的开始。
感谢您的解决方案。这是一个完美的解决方案。但是有一个小问题：没有 computed() 方法是否可行？在我的应用程序中，我必须将选定的用户（包括他们的角色）发布到服务器。如果没有 computed() 方法，这可能吗？
您可以从 vue 中的任何函数访问计算值，并像组件中的任何其他数据一样发送数据。我将为您提供一个链接，指向使用 vue 进行 ajax 调用的教程。整个教程都很棒，因此它可以帮助您完成项目的其余部分。 laracasts.com/series/learn-vue-2-step-by-step/episodes/18