Update database table from json data using vue

I have a page when data is encoded and outputted as json. This is done using laravel and vue.

I have a vue component that renders the data.

Index Page

public function index()
    {
        $roles = Role::all();

        foreach ($roles as $role) {
            $role['permissions'] = $role->permissions()->pluck('id')->toArray();
        }

        $obj = [
          'roles' => $roles,
          'permissions' => Permission::all()
        ];

        $permissions = json_encode(array('data' => $obj));

        return view('backend.permissions-manager', compact('permissions'));
    }

This is the vue

 <div id="vue-app">
    <permissions-manager :data="data"></permissions-manager>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/x-template" id="permissions-manager">
    <div class="permissions-manager">
      <div class="permissions-manager-messenger" :data-accent="hasError ? 'alert' : 'positive'" v-if="message">
        <div>@</div>
        <button type="button" class="button--text" @click="message = ''">Dismiss</button>
      </div>
      <div class="permissions-manager-panels">
        <aside class="permissions-manager__role-selector-column">
          <h2>Select a role to edit:</h2>
          <ul>
            <li class="permissions-manager__role-selector" v-for="role in roles"
              :class="{selected: role.id === selectedRoleId}"
              @click="selectedRoleId = role.id">
              @
            </li>
          </ul>
          <div class="permissions-manager__role-selector__submit-row">
            <button @click="saveChanges()" class="atrium-button" type="button" :class="{disabled: isSaving}" :disabled="isSaving">@</button>
          </div>
        </aside>
        <ul class="atrium-form">
          <li v-for="permissionGroup in permissionGroups">
            <details class="permission-manager__group details" open>
              <summary>
                <h3>@</h3>
                <button type="button" class="button--text" v-if="groupHasSelection(permissionGroup)" @click="uncheckGroup(permissionGroup)">Uncheck all</button>
                <button type="button" class="button--text" v-else @click="checkGroup(permissionGroup)">Check all</button>
              </summary>
              <ul class="permission-checkbox-list">
                <li v-for="permission in permissionGroup.permissions">
                  <div class="checkbox">
                    <input type="checkbox" :id="'permission-' + permission.name"
                      :checked="isSelectedPermission(permission.id)"
                      @click="togglePermission(permission.id)"
                      />
                    <label :for="'permission-' + permission.name">@</label>
                  </div>
                </li>
              </ul>
            </details>
          </li>
        </ul>
      </div>
    </div>
  </script>
  <script>

  var app = new Vue({
    el: '#vue-app',
    data: function() {
      return {
        data: {!! $permissions !!},
      }
    }
  })
  </script>

I'm trying to update the permissions and the roles. But I'm not sure what to do with the JSON.

This is the method to update, it takes in a endpoint.

saveChanges() {
  let url = '/admin/permissions-manager/update';
  let payload = Object.assign({},this.selectedRole);
  payload.permissions = payload.permissions.map(function(p) { return p; });
  this.isSaving = true;
  this.hasError = false;
  console.log(payload);
  axios.put(url, payload).then(function(response) {
    this.isSaving = false;
    console.log(response);
    this.message = 'Successfully updated the permission and feature settings.';
  }.bind(this)).catch(function(e) {
    this.isSaving = false;
    this.hasError = true;
    this.message = e.message ? e.message : 'Failed to udpate the permission and feature settings. Please try again, or contact technical support.';
    console.log(e);
  }.bind(this))
}

The url corresponds to this method,

  public function update(){
      DB::table('role_has_permissions')->update([$permissions]);
    }

Any idea on how to process this update.

via Chebli Mohamed