v-for 循环中 v-model 的动态绑定

Question

我正在尝试将 v-model 动态绑定到 对象属性 inside 对象数组。我不知道该怎么做。目标是通过 Select html 标记 select 用户，然后打印用户权限列表（来自 对象数组 ) 可以使用 checkboxes 更改 true/false 并将更改保存到 object 属性 在对象 数组内 .

模板：

<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 link 因为我觉得很难用语言解释。

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

我需要将 v-model 动态绑定到每个 users[someindex].perms.perm 属性才能更改它。稍后我想将这个数组上传到包含所有更改的 firebase 数据库。先感谢您！我知道这是一件基本的事情，但非常感谢任何帮助！ P.S。抱歉我的英语不好。

Answer 1

在你的情况下 <input type="checkbox" v-model="perm.perm"> 足以让它工作。

虽然我建议进行一些重构和重命名，但 sinde perm.perm 表明您当前的数据结构和命名是多么不直观。

我建议使用 computed 属性到 return 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-model 的动态绑定

Dynamic binding of v-model inside v-for loop

javascript

arrays

vue.js

vuejs2

v-model