javascript - 如何根据具体值使用 Vue.js 2 检查复选框？

Question

我正在尝试在我的应用程序中实现 Angular 色和权限系统。我使用 Vue.js2 作为前端，使用 Laravel 5.4 作为后端。

这是包含数据库中所有 Angular 色的 allRoles 数组:

data: {
    // ...
    allRoles: [],
    userInfo: {
        id: null,
        fullname: '',
        phone: '',
        email: '',
        created_at: '',
        roles: [],
        permissions: []
    },
    // ...
},

这是获取用户信息的方法，我将填写 allRoles 数组。

getUserInfo(user_id) {
    this.infoLoading = true;
    axios.get(`/api/users/info/${user_id}`)
       .then((response) => {
          console.log(response);   
          if(response.status === 200) {
              this.userInfo.id            = response.data.user.id;
              this.userInfo.fullname      = response.data.user.fullname;
              this.userInfo.email         = response.data.user.email;
              this.userInfo.phone         = response.data.user.phone;
              this.userInfo.created_at    = response.data.user.created_at;
              this.userInfo.roles         = response.data.user.roles;
              this.userInfo.permissions   = response.data.user.permissions;  
              this.updateUserInfoButton   = true;
              this.allRoles               = response.data.allRoles;
              this.allPermissions         = response.data.allPermissions;
          }
          this.infoLoading = false;
      })
      .catch((error) => {
          console.log(error);
      });
}

这是我尝试选中复选框的标记:

<div class="checkbox checkbox-success" v-for="role in allRoles">
    <div v-for="singleRole in userInfo.roles" :key="singleRole.id">
        <input :id="role.name" type="checkbox" :value="role.id" v-model="userInfo.roles" :checked="singleRole.name.includes(role.name) ? 'true' : 'false'">
        <label :for="role.name">@{{ role.display_name }}</label>
    </div>
</div> 

但不幸的是我没有选中复选框。我应该如何正确地做到这一点？解决方法是什么？

Answer 1

如果您想要做的是列出所有 Angular 色，并检查用户的 Angular 色并更新 userInfo.roles同时，那么只要 userInfo.roles 就应该有效。包含 Angular 色的 ID:

https://jsfiddle.net/eywraw8t/24424/

模板(我稍微改变了你的模板，因为当我使用你的模板时，所有输入都出现了两次。而且你不需要同时使用 :checked 和 v-model ):

<div id="app">
  <div class="checkbox checkbox-success" v-for="role in allRoles">
     <input :id="role.name" type="checkbox" :value="role.id" v-model="userInfo.roles">
     <label :for="role.name">@{{ role.name }}</label>
  </div> 
  {{userInfo.roles}}
</div>

vue:

new Vue({
  el: "#app",
  data: {
    allRoles: [
      {
        id: 1,
        name: 'test_role'
      },
      {
        id: 2,
        name: 'another_role'
      },
      {
        id: 3,
        name: 'pizza eater'
      },
      {
        id: 4,
        name: 'peanuts eater'
      }
    ],
    userInfo: {
        id: null,
        fullname: '',
        phone: '',
        email: '',
        created_at: '',
        roles: [1, 3],
        permissions: []
    },
  }
})