Vue Multidimensional Array submission question?

topic description

the multi-dimensional array obtained from the background is parsed to form a multi-box interface. After multiple selections, the data is submitted, and then the data is sent back to the background, but the format of the incoming data is different

.

sources of topics and their own ideas

The format returned by

requires that the first layer json string traverses the second layer children without processing, that is, the
parent and child SN composition example Security:view. My idea is to put the parent SN and child SN of checked into postForm.permissionList, then get the background parent SN matching replacement, and then empty the postForm.permissionList, submission

related codes

/ / Please paste the code text below (do not replace the code with pictures)
page code queryData gets data.module.children

< el-form-item label= "role name" prop= "name" >

      <el-input :maxlength="300" v-model="postForm.name" />
    </el-form-item>
    <el-checkbox-group v-for="(items,index) in queryData" :key="index">
      <el-form-item :label="items.description">
        <el-checkbox-group v-model="postForm.permissionList" @change="checkinlist">{{ items[index] }}
          <el-checkbox v-for="(data,index) in items.operations" :label="items.sn+data.sn" :key="index">
            {{ data.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-checkbox-group v-for="(items,index) in items.children" :key="index" >
        <el-form-item :label="items.description">
          <el-checkbox-group v-model="postForm.permissionList" @change="checkinlist">{{ items[index] }}
            <el-checkbox v-for="(data,index) in items.operations" :label="items.sn+data.sn" :key="index">
              {{ data.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-checkbox-group>
    </el-checkbox-group>
    
    SNlabel:this.role_objSN
     const Str = []
  for (let j = 0; j < this.role_obj.length; jPP) {
    for (let i = 0; i < this.postForm.permissionList.length; iPP) {
      if (this.postForm.permissionList[i].match(this.role_obj[j])) {
        Str.push(this.postForm.permissionList[i].replace(this.role_obj[j], this.role_obj[j] + ":"))
      }
    }
  }
  console.info(Str)
  this.postForm.permissionList = []
  for (let i = 0; i < Str.length; iPP) {
    this.postForm.permissionList[i] = Str[i]
    JSON.stringify(this.postForm.permissionList)
    console.info(this.postForm.permissionList)
  }

what result do you expect? What is the error message actually seen?

I want to know how to put it together, or if I have the wrong idea

Jun.09,2021

I don't quite understand why your backend wants you to pass it like this. Why don't you just send an object back, and then the field in the object corresponds to a permission, and the value of the permission is an array. If it is not checked, pass an empty array. The backend can get the corresponding value by itself.

permissonList: {
  Security: ['view'],
  Role: ['view', 'save', 'edit'],
  Module: []
}
Menu