Question

我试图将 v模型动态绑定到对象数组内部的对象属性。我不知道该怎么做。目的是通过选择 html标签选择用户，然后打印用户权限列表（来自对象数组），以便可以更改 true / false < / strong>使用复选框，并将更改保存到对象数组内部的对象属性。

模板：

<div id="app"> <select v-model="selectedUser"> <option value="" disabled>Select User</option> <option v-for="user in users" :value="user.name">{{ user.name }}</option> </select> <p>User Index: {{ getUserIndex }}</p> <ul v-if="getUserIndex !== null"> <li v-for="(perm, id) in users[getUserIndex].perms"> <span>{{ perm.status }}</span> <input type="checkbox" v-model=""> </li> </ul> </div>

脚本

new Vue({ el: "#app", data: { users: [ { name: 'Alex', perms: [ { status: 'active', perm: false }, { status: 'invoice', perm: false } ] }, { name: 'John', perms: [ { status: 'active', perm: false }, { status: 'invoice', perm: false } ] }, { name: 'Helen', perms: [ { status: 'active', perm: false }, { status: 'invoice', perm: false } ] }, ], selectedUser: '' }, computed: { getUserIndex() { let username = this.selectedUser; let index = this.users.findIndex(el => el.name === username); if (index == -1) { return null } else { return index } } }, })

我分享了此 JSFiddle 链接，因为我很难用语言解释。

https://jsfiddle.net/sgtmadcap/49bjwahs/141/

我需要将v模型动态绑定到每个 users [someindex] .perms.perm 属性，以便对其进行更改。稍后，我要将所有更改上传到Firebase数据库。先感谢您！我知道这是基本的事情，但是任何帮助都是值得赞赏的！附言对不起，我的英语不好。

Answer 1

在您的情况下，<input type="checkbox" v-model="perm.perm">足以使其正常工作。

我建议您进行一些重构和重命名，sinde perm.perm显示了您当前数据结构和命名的直观程度。

我建议使用computed属性返回userPermissions，而不要通过模板中的索引访问数组。
还可以考虑将对象属性重命名为permissions和isAllowed之类的内容，以使其更加清晰。

computed: {
  ...
  userPermissions() {
    let index = this.getUserIndex()
    // TODO: handle null
    return this.users[index].permissions
  }
}

在您的模板中

<li v-for="p in userPermissions">
  <span>{{ p.status }}</span>
  <input type="checkbox" v-model="p.isAllowed">
</li>

Answer 2

这应该可行。

new Vue({
  el: "#app",
  data: {
    users: [{
        name: 'Alex',
        perms: [{
            status: 'active',
            perm: false
          },
          {
            status: 'invoice',
            perm: false
          }
        ]
      },
      {
        name: 'John',
        perms: [{
            status: 'active',
            perm: false
          },
          {
            status: 'invoice',
            perm: false
          }
        ]
      },
      {
        name: 'Helen',
        perms: [{
            status: 'active',
            perm: false
          },
          {
            status: 'invoice',
            perm: false
          }
        ]
      },
    ],
    selectedUser: ''
  },
  computed: {
    getUserIndex() {
      let username = this.selectedUser;
      let index = this.users.findIndex(el => el.name === username);
      if (index == -1) {
        return null
      } else {
        return index
      }
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selectedUser">
    <option value="" disabled>Select User</option>
    <option v-for="user in users" :value="user.name">{{ user.name }}</option>
  </select>
  <p>User Index: {{ getUserIndex }}</p>
  <ul v-if="getUserIndex !== null ">
    <li v-for="(item, id) in users[getUserIndex].perms">
      <span>{{ item.status }}</span>
      <input type="checkbox" v-model="item.perm">
    </li>
  </ul>
</div>

v-for循环内v模型的动态绑定

2 个答案: