v-for循环中对象嵌套数组中的v-model

Question

我正在尝试遍历v-for循环中对象的嵌套数组，将v-model分配给数组中的某些属性值。

模板

<div class="col s12 m12 l12">
              <h6>User permissions:</h6>
              <select
                style="margin-top: 1.35rem;"
                @change="userPermChanged"
                v-model="userPerm"
                class="browser-default"
              >
                <option value="" selected default disabled>Select user</option>
                <option
                  v-for="user in userPermissions"
                  :key="user.name"
                  :value="user.name"
                  >{{ user.name }}</option
                >
              </select>
              <transition name="fade">
                <ul v-show="userPermListOpened" class="collection">
                  <li class="collection-item indigo lighten-5">
                    <a
                      href="#!"
                      class="secondary-content"
                      @click="userPermListOpened = !userPermListOpened"
                      ><i style="color: black;" class="material-icons"
                        >close</i
                      ></a
                    >
                    <div v-if="this.userPermListOpened" style="display: flex; flex-direction: column">
                      <p
                        v-for="(status, index) of userPermissions[
                          getCurrentUserForPermission
                        ].statuses"
                        style="margin: 0.5rem;"
                      >
                        <label>
                          <input
                            type="checkbox"
                            class="filled-in"
                            v-model="status.permission"
                            @change="permCheckboxChanged"
                          />
                          <span style="color: black">{{ status.status }}</span>
                        </label>
                      </p>
                    </div>
                  </li>
                </ul>
              </transition>
              <button
                @click="updateUserPerms"
                v-if="userPermListOpened"
                class="btn"
              >
                Update
              </button>
            </div>

脚本

data: () => ({
  userPerm: '',
  userPermissions: [],
  userPermListOpened: true
}),
methods: {
userPermChanged() {
      let self = this;
      this.userPermListOpened = false;
      setTimeout(function() {
        self.userPermListOpened = true;
      }, 100);
    }
},
computed: {
getCurrentUserForPermission() {
      let searchName = this.userPerm;
      let index = this.userPermissions.findIndex(el => el.name === searchName);
      if (index == -1) {
        return 0;
      } else {
        return index;
      }
    }
},
mounted {
let userPermissions = [];
    let statuses = [];

    let self = this;

    this.load.forEach(function(l) {
      let item = { status: l.status, permission: true };
      statuses.push(item);
    });

    this.users.forEach(function(u) {
      let item = { name: u.name, statuses: [] };
      item.statuses.push(...statuses);
      userPermissions.push(item);
    });

    this.userPermissions = userPermissions;
}

我想使用v-for更改数组中对象属性内的值，以便稍后将其上载到服务器，但是当我选择然后通过“选择输入”文本字段进行选择时，所有更改都会影响其他用户。我不知道为什么。

https://youtu.be/wD-HgYl5mNM我拍摄的这段视频演示了问题