Create an object with a nested data property which comes from a select

[studnitz]

Let's assume I have the following strucutre:

class UserData extends Data
{
    public function __construct(
        public int $id,
        public string $name,
        public RoleData $role,
    )
}


class RoleData
{
     public function __construct(
         public int $id,
         public string $name,
     )
}

UserController.php:

public function create() {
    return inertia([
        'roles' => RoleData::collection(Role::all())
    ]);
}

Usually I would create a form in Vue like this:

<template>
    <form>
        <input v-model="form.name" type="text">
        <select v-model="form.role">
            <option v-for="role in roles" :key="role.id" :value="role.id"> {{ role.name }}</option>
        </select>
     </form>
</template>

<script setup>

const props = defineProps(['roles'])

const form = useForm({ name: '', role: null })
</script>

Now the problem is the following: The UserData expects $role to be a RoleData with id and name, but the frontend only sends the ID of the it. Should I use fromRequest() to retrieve the Role from the database first? Or should I add a cast that does that.

Normally the validation rules would look this:

StoreUserRequest.php

public array $rules = [
    'name' => ['required', 'string'],
    'role' => ['required', new Exists(Role::class, 'id')],
];

How does this translate to laravel-data? Hope I'm clear enough. 😅

[studnitz]

Implementing #14 would solve this problem, because I could transform the Role ID to the expected representation before it is validated.

[rubenvanassche]

Correct me if I'm wrong, but in this case I would only use the role_id in the data object without the object and name field. Then to the frontend I would send the data object + an array with a mapping from role id to role name. This removes a lot of data duplication.

[skch-dev]

Let's say, for example, that in Vue, given this user object, the role property comes from a select2 ajax which retrieves data from the roles table.

const user = reactive({
  username: "John Doe",
  email: "[email protected]",
  role: {
    id: 1,
    text: "Admin"
  }
})

If I'm right, you are suggesting to send only role_id to Laravel.. to simplify / make more readable the validation inside laravel-data backend object, refactoring like follows.

const user = reactive({
  username: "John Doe",
  email: "[email protected]",
  role_id: 1
})

But... what if the role in Vue is selected through a "tag component"? ... so, we haven't ID yet, but only a text label to send to Laravel backend.

const user = reactive({
  username: "John Doe",
  email: "[email protected]",
  role: {
    id: null,
    text: "Supervisor"
  }
})

We obviously can't write this:

const user = reactive({
  username: "John Doe",
  email: "[email protected]",
  role_id: null
})

Which is, according to you @rubenvanassche, the correct way to handle a generic remote field id and text? Do we really need a second array/object to map texts?

Thanks if you may help 🙏

[rubenvanassche]

Another way of supporting this, could be creating 2 data objects: UserData with the full role and UpdateUserData where you only require the role_id.