Take your Inertia.js skills to the next level

class JobData extends DataResource
{
  protected $permissions = ['view', 'update'];

  public function __construct(
    public int $id,
    public CategoryData $category,
    /** @var DataCollection<SkillData> */
    public DataCollection $skills,
    public string $title,
    public array $benefits
  ) {}
}

<div v-for="job in jobs" :key="job.id">
  <div>
    {{ job.title }}
  </div>

  <div v-for="skill in skills" :key="skill.id">
    {{ skill.name }}
  </div>

  <div v-if="can(job, 'update')">
    <a :href="route('jobs.edit', job)">Show</a>
  </div>
</div>

<script setup lang="ts">
const props = defineProps<{
  job: App.Data.JobData
}>()

const form = useForm(props.job)

function submit () {
  form.put(route("jobs.update", props.job), {
    preserveScroll: true,
  })
}
</script>