Question

这是我的小提琴：DEMO

 modules: [{
      moduleName: "Module ABC",
      id: 1,
      actions: [{
        actionName: "addbrand",
        id: 1,
        permissions: [{
          permissionName: "read",
          "id": 1,
          "value": true
        }, {
          permissionName: "write",
          "id": 2,
          "value": true
        }, {
          permissionName: "execute",
          "id": 1,
          "value": false
        }]
}]

复选框是动态生成的，迭代数据对象中的“modules”数组。但我发现很难分配v-model并为相应的“模块”捕获相应“动作”的检查值

我该怎么做？

<div v-for="module in modules"><b>{{ module.moduleName }}</b>
    <div v-for="action in module.actions">{{ action.actionName }}
      <div v-for="permission in action.permissions">
        <input type="checkbox"> {{ permission.permissionName }}
      </div>
    </div>
    <hr>
  </div>

非常感谢任何帮助。谢谢..

Answer 1

我不确定嵌套超过2 v-for是个好主意。但您可以在v-for index中创建<p v-for='(foo, index) in array'并使用索引来跟踪更改。

在你的情况下，你会做这样的事情https://jsfiddle.net/samayo/az9hge7u/5/

new Vue({
  el: '#app',
  data: {
    modules: [{
      moduleName: "Module ABC",
      id: 1,
      actions: [{
        actionName: "addbrand",
        id: 1,
        permissions: [{
          permissionName: "read",
          "id": 1,
          "value": true
        }, {
          permissionName: "write",
          "id": 2,
          "value": true
        }, {
          permissionName: "execute",
          "id": 1,
          "value": false
        }]
      }, {
        actionName: "addproduct",
        id: 2,
        permissions: [{
          permissionName: "read",
          id: 1,
          value: true
        }, {
          permissionName: "write",
          id: 2,
          value: true
        }, {
          permissionName: "execute",
          id: 1,
          value: false
        }]
      }]
    }, {
      moduleName: "Module PQR",
      id: 2,
      actions: [{
        actionName: "addrules",
        id: 3,
        permissions: [{
          permissionName: "read",
          id: 1,
          value: true
        }, {
          permissionName: "write",
          id: 2,
          value: true
        }, {
          permissionName: "execute",
          id: 1,
          value: false
        }]
      }, {
        actionName: "addactions",
        id: 4,
        permissions: [{
          permissionName: "read",
          id: 1,
          value: true
        }, {
          permissionName: "write",
          id: 2,
          value: true
        }, {
          permissionName: "execute",
          id: 1,
          value: false
        }]
      }]
    }]
  }
})

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <div v-for="(module, moduleIndex) in modules"><b>{{ module.moduleName }}</b>
    <div v-for="(action, actionIndex) in module.actions">{{ action.actionName }}
      <div v-for="(permission, permIndex) in action.permissions">
        <input type="checkbox" v-model='modules[moduleIndex].actions[actionIndex].permissions[permIndex].value'> {{ permission.permissionName }} - {{modules[moduleIndex].actions[actionIndex].permissions[permIndex].value}}
      </div>    
    </div> <hr>
  </div>

Answer 2

https://jsfiddle.net/srinivassunkari/t2fjzLpn/29/

1由于存在突变，因此无需使用索引来更新权限“值”的值

2使用v模型时，它会更新模块中的权限值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="module in modules"><b>{{ module.moduleName }}</b>
        <div v-for="action in module.actions">{{ action.actionName }}
            <div v-for="permission in action.permissions">
                <input type="checkbox" v-model="permission.value">
                {{ permission.permissionName }}
            </div>
        </div>
        <hr>
    </div>
</div>
<script>

new Vue({
    el: '#app',
    data() {
        return {
            modules: [{
                moduleName: "Module ABC",
                id: 1,
                actions: [{
                    actionName: "addbrand",
                    id: 1,
                    permissions: [{
                        permissionName: "read",
                        "id": 1,
                        "value": true
                    }, {
                        permissionName: "write",
                        "id": 2,
                        "value": true
                    }, {
                        permissionName: "execute",
                        "id": 1,
                        "value": false
                    }]
                }]
            }]
        }
    },
    // for understanding purpose added no need to consider this...
    watch: {
        modules: {
            deep: true,
            handler(modules) {
                console.log('modules', modules)
            }
        }
    }
})
</script>

用于动态生成复选框的v模型

2 个答案: